/* Chef AI — дизайн-токены направления «Жёлтая тетрадь». Светлая тема — единственная (решение 30.08.2026).
   Источник истины до скаффолда приложения; при создании apps/web перенести в apps/web/src/index.css.
   Контекст и правила применения — DESIGN.md; происхождение значений — research/designs/extraction.md. */

:root{
  /* Палитра (OKLCH; hex — справочно) */
  --color-background: oklch(0.985 0.005 95);        /* #FBFAF6 тёплая бумага — фон приложения */
  --color-surface: oklch(1 0 0);                    /* #FFFFFF лист/карточки поверх бумаги */
  --color-foreground: oklch(0.222 0.006 92);        /* #1C1B18 чернильный — текст и бар-подложка CTA */
  --color-muted: oklch(0.952 0.01 94);              /* #F1EFE8 тихие подложки: круглые кнопки, чипсы */
  --color-muted-foreground: oklch(0.557 0.018 99);  /* #767468 вторичный текст */
  --color-border: oklch(0.927 0.012 96);            /* #E9E7DE разделители */
  --color-primary: oklch(0.909 0.127 98);           /* #F7E27A единый фирменный жёлтый = цвет маркера (решение владельца В14, 06.09.2026); иконка приложения остаётся #F2D649 */
  --color-primary-foreground: oklch(0.222 0.006 92);/* текст на жёлтом — только чернильный (13.2:1) */
  --color-highlight: oklch(0.909 0.127 98);         /* #F7E27A жёлтый маркер — «подпись» проекта; значение = primary, отдельный токен ради правил DESIGN.md §8 */
  --color-success: oklch(0.621 0.118 150);          /* #4C9A5F семантика: хранится/готово */
  --color-info: oklch(0.582 0.094 249);             /* #4C7FB0 семантика: заморозка/подсказка */
  --color-warning: oklch(0.731 0.138 77);           /* #D89B2E семантика: разогрев/внимание */
  /* Подложки входов главного экрана — значения прототипа (prototype/src/styles/tokens.css; решение владельца 05.09.2026), перенесены по словам владельца 21.10.2026 «совершенно другие кнопки коктейлей и плашки crazy-рецептов». Только подложки плиток главного, текст на них чернильный */
  --color-tile-crazy: oklch(0.91 0.07 80);          /* #F1E3BE песочная плашка «Crazy-рецепт дня» */
  --color-tile-cocktails: oklch(0.87 0.08 175);     /* #9BE6D1 плитка «Коктейли» */
  --color-tile-surprise: oklch(0.85 0.10 45);       /* #FFB997 плитка «Удиви меня» */

  /* Типографика (UI — системный шрифт платформы; Lora — variable, subset latin+cyrillic, font-display: swap, лицензия SIL OFL) */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;  /* UI: системный шрифт платформы (SF на iOS, Roboto на Android), стек как в прототипе; Onest снят решением владельца В14, 06.09.2026 */
  --font-display: "Lora", Georgia, serif;                                /* Lora 600: заголовки экранов и разделов, шапки, листы, диалоги, пустые состояния, имена блюд и брендовые моменты (В14, как в прототипе) */

  /* Форма */
  --radius-sheet: 28px;  /* лист поверх фото; плавающий бар */
  --radius-photo: 22px;  /* фото-карточки */
  --radius-card: 16px;   /* обычные карточки */
  --radius-pill: 999px;  /* кнопки, чипсы, инпуты */

  /* Тени */
  --shadow-card: 0 2px 12px rgb(30 15 0 / 0.08);
  --shadow-bar: 0 10px 28px rgb(30 20 0 / 0.25);

  /* ---------- Редизайн v2 (холст «Chef AI — ключевые экраны», 26.10.2026) ----------
     Предложения холста `--new-*` утверждены владельцем 26.10.2026 дословно в чате: «такс, отлично,
     мы отрисовали новый улучшенный дизайн. теперь я хочу, чтобы мы наше приложение подогнали pixel
     perfect под новый дизайн (с учетом резиновой верстки, важно, чтобы на разных размерах шрифта и
     на разных размерах экрана интерфейс выглядел адекватно)». Имена — по смыслу утилиты Tailwind,
     в комментарии — имя на холсте (chef.css). */
  --color-destructive: oklch(0.577 0.215 27);           /* ошибка, удаление, крест ограничений (= --destructive shadcn) */
  --color-subtle: oklch(0.45 0.016 95);                 /* --new-text-secondary ≈ #5F5D54: вторичный текст на --muted и цветных плитках (6.3:1) */
  --color-scrim: oklch(0.222 0.006 92 / 0.45);          /* --new-scrim: затемнение под листом и диалогом */
  --color-info-soft: oklch(0.95 0.025 249);             /* --new-info-soft: плашка-подсказка */
  --color-success-soft: oklch(0.95 0.035 150);          /* --new-success-soft: «Рецепт готов» */
  --color-warning-soft: oklch(0.95 0.05 80);            /* --new-warning-soft: предупреждение, аналог */
  --color-destructive-soft: oklch(0.95 0.035 27);       /* --new-destructive-soft: ошибка поля, «Не получилось» */
  --color-primary-disabled: oklch(0.955 0.055 98);      /* --new-primary-disabled: недоступная главная кнопка */
  --color-primary-pressed: oklch(0.813 0.11 97);        /* нажатая главная: --primary 86 % + чернила 14 % (холст ds-controls) */
  --color-glass: oklch(1 0 0 / 0.58);                   /* стекло нижней навигации: --surface 58 % (непрозрачный фолбэк — --surface) */

  --shadow-raised: 0 1px 2px rgb(30 15 0 / 0.05), 0 8px 24px rgb(30 15 0 / 0.08);  /* --new-shadow-raised: блок ввода, карточка с фото */
  --shadow-float: 0 1px 2px rgb(30 15 0 / 0.06), 0 12px 32px rgb(30 15 0 / 0.14);  /* --new-shadow-float: нижняя навигация, лист, карточка поверх обложки */
  --shadow-glass: inset 0 1px 0 oklch(1 0 0 / 0.95), inset 0 0 0 1px oklch(1 0 0 / 0.6), 0 0 0 0.5px oklch(0.222 0.006 92 / 0.1), 0 1px 2px rgb(30 15 0 / 0.06), 0 12px 32px rgb(30 15 0 / 0.14); /* блик и край стекла навигации + --new-shadow-float */
  --shadow-field: inset 0 0 0 1px oklch(0.927 0.012 96);                                    /* поле в покое: рамка --border */
  --shadow-field-focus: inset 0 0 0 1.5px oklch(0.222 0.006 92), 0 0 0 4px oklch(0.909 0.127 98 / 0.55); /* фокус поля: чернильная рамка + --new-focus-ring */
  --shadow-field-error: inset 0 0 0 1.5px oklch(0.577 0.215 27);                           /* поле с ошибкой */
  --shadow-ink-frame: inset 0 0 0 1.5px oklch(0.222 0.006 92), 0 2px 12px rgb(30 15 0 / 0.08); /* блок ввода главной: чернильная рамка + --shadow-card */
  --shadow-outline: inset 0 0 0 1px oklch(0.927 0.012 96), 0 2px 12px rgb(30 15 0 / 0.08);     /* контурная кнопка и плитка: рамка --border + --shadow-card */

  --blur-glass: 28px;  /* размытие стекла нижней навигации (с saturate 1.8) */

  /* Типографика холста (chef.css `--t-*`) — в rem, чтобы текст рос с системным размером шрифта.
     Семейство задаёт утилита: font-display (Lora 600) у display/h1/h2/h3, остальное — font-sans. */
  --text-display: 2.125rem;            /* 34/40 заголовок экрана */
  --text-display--line-height: 2.5rem;
  --text-display--letter-spacing: -0.01em;
  --text-display--font-weight: 600;
  --text-h1: 1.75rem;                  /* 28/34 имя блюда на карточке */
  --text-h1--line-height: 2.125rem;
  --text-h1--font-weight: 600;
  --text-h2: 1.375rem;                 /* 22/28 шапка, раздел, лист */
  --text-h2--line-height: 1.75rem;
  --text-h2--font-weight: 600;
  --text-h3: 1.125rem;                 /* 18/24 имя блюда в списке */
  --text-h3--line-height: 1.5rem;
  --text-h3--font-weight: 600;
  --text-headline: 1.0625rem;          /* 17/22 кнопки, строки списков */
  --text-headline--line-height: 1.375rem;
  --text-headline--font-weight: 600;
  --text-body: 1rem;                   /* 16/24 основной текст, ввод */
  --text-body--line-height: 1.5rem;
  --text-callout: 0.9375rem;           /* 15/22 пояснения */
  --text-callout--line-height: 1.375rem;
  --text-subhead: 0.875rem;            /* 14/20 подписи полей, чипсы, малые кнопки */
  --text-subhead--line-height: 1.25rem;
  --text-subhead--font-weight: 600;
  --text-footnote: 0.8125rem;          /* 13/18 метаданные, сноски */
  --text-footnote--line-height: 1.125rem;
  --text-caption: 0.6875rem;           /* 11/14 бейджи */
  --text-caption--line-height: 0.875rem;
  --text-caption--font-weight: 600;
  --text-overline: 0.6875rem;          /* 11/14 надстрочник ЗАГЛАВНЫМИ */
  --text-overline--line-height: 0.875rem;
  --text-overline--letter-spacing: 0.08em;
  --text-overline--font-weight: 700;
  --text-tab: 0.625rem;                /* 10/12 подписи нижней навигации */
  --text-tab--line-height: 0.75rem;
  --text-tab--letter-spacing: -0.01em;
  --text-tab--font-weight: 600;
  --text-num: 1.75rem;                 /* 28/32 числа-факты, tabular-nums */
  --text-num--line-height: 2rem;
  --text-num--font-weight: 700;
  --text-num-xl: 2.75rem;              /* 44/48 число дня в трекере */
  --text-num-xl--line-height: 3rem;
  --text-num-xl--font-weight: 700;
  --text-num-hero: 3.5rem;             /* 56/56 остаток дня на тёмной панели трекера (холст diary-day) */
  --text-num-hero--line-height: 3.5rem;
  --text-num-hero--letter-spacing: -0.02em;
  --text-num-hero--font-weight: 700;
}

/* Подпись-маркер (DESIGN.md §8; образец — Scope_Reconciliation.md, раздел 4). Вне @theme:
   утилиты rounded-marker нет, радиус берёт только класс .marker в apps/web. Решение владельца 14.09.2026 */
:root {
  --radius-marker: 4px 10px 5px 9px; /* неровные края штриха */
}

/* Семантические переменные shadcn (маппинг на токены выше) */
:root {
  color-scheme: light; /* тёмной темы нет — не добавлять без решения человека */
  --background: oklch(0.985 0.005 95);
  --foreground: oklch(0.222 0.006 92);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.222 0.006 92);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.222 0.006 92);
  --primary: oklch(0.909 0.127 98);
  --primary-foreground: oklch(0.222 0.006 92);
  --secondary: oklch(0.952 0.01 94);
  --secondary-foreground: oklch(0.222 0.006 92);
  --muted: oklch(0.952 0.01 94);
  --muted-foreground: oklch(0.557 0.018 99);
  --accent: oklch(0.952 0.01 94);
  --accent-foreground: oklch(0.222 0.006 92);
  --destructive: oklch(0.577 0.215 27);
  --border: oklch(0.927 0.012 96);
  --input: oklch(0.927 0.012 96);
  --ring: oklch(0.909 0.127 98);
  --radius: 16px;
}

:root {
  --admin-space-1: 4px;
  --admin-space-2: 8px;
  --admin-space-3: 12px;
  --admin-space-4: 16px;
  --admin-space-5: 24px;
  --admin-space-6: 32px;
  --admin-radius-sm: 8px;
  --admin-radius-md: 12px;
  --admin-text-sm: 0.875rem;
  --admin-text-base: 1rem;
  --admin-text-lg: 1.25rem;
  --admin-text-xl: 1.5rem;
  /* Сторона превью галереи датасета (изменение `f18-dataset`). */
  --admin-thumb: 10rem;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--admin-text-base);
  line-height: 1.5;
}

main.admin {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--admin-space-5) var(--admin-space-4) var(--admin-space-6);
}

h1 {
  margin: 0 0 var(--admin-space-4);
  font-size: var(--admin-text-xl);
  font-weight: 600;
  line-height: 1.25;
}

h2 {
  margin: var(--admin-space-6) 0 var(--admin-space-3);
  font-size: var(--admin-text-lg);
  font-weight: 600;
  line-height: 1.25;
}

a { color: inherit; }

/* Видимый фокус — на всём, что получает его с клавиатуры. Снимать браузерный контур без замены
   нельзя: без фокуса страница непроходима с клавиатуры. Цвет — чернильный, а не --ring: тот
   равен фирменному жёлтому, и на белой карточке даёт около 1.3:1, а на жёлтой кнопке совпадает
   с её заливкой — то есть «видимого фокуса» не было бы вовсе (Codex P2). */
:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 2px;
}

/* Шапка: разделы и «Выйти». Пункты переносятся — семь-восемь будущих разделов в одну строку на
   телефоне не помещаются, а горизонтальная прокрутка внутри шапки без скриптов это полоса, о
   существовании которой человек не узнает. */
.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--admin-space-2) var(--admin-space-4);
  padding: var(--admin-space-3) var(--admin-space-4);
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-1) var(--admin-space-3);
}

.admin-nav-item {
  padding: var(--admin-space-1) var(--admin-space-2);
  border-radius: var(--admin-radius-sm);
  color: var(--muted-foreground);
  text-decoration: none;
}

.admin-nav-item:hover { color: var(--foreground); }

/* Текущий раздел отмечен не только цветом: подложка и насыщенность держатся и в чёрно-белом
   виде. Для программ чтения его называет «aria-current» в разметке. */
.admin-nav-item[aria-current='page'] {
  background: var(--muted);
  color: var(--foreground);
  font-weight: 600;
}

.admin-bar-out { margin: 0; }


label {
  display: block;
  margin: 0 0 var(--admin-space-3);
}

input,
select {
  width: 100%;
  box-sizing: border-box;
  margin: var(--admin-space-1) 0 0;
  padding: var(--admin-space-2) var(--admin-space-3);
  border: 1px solid var(--input);
  border-radius: var(--admin-radius-sm);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
}

.admin-button {
  padding: var(--admin-space-2) var(--admin-space-4);
  border: 1px solid var(--primary);
  border-radius: var(--admin-radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.admin-button--quiet {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-weight: 400;
}

.admin-button--danger {
  border: 1px solid var(--destructive);
  background: var(--card);
  color: var(--destructive);
}

/* Сообщение о результате. Вид читается **без цвета**: пометка стоит текстом перед сообщением, а
   полоса слева повторяет её. Роль («status» или «alert») задаётся в разметке. */
.admin-message {
  margin: 0 0 var(--admin-space-4);
  padding: var(--admin-space-3) var(--admin-space-4);
  border-left: 2px solid var(--border);
  border-radius: var(--admin-radius-sm);
  background: var(--muted);
}

.admin-message-mark { font-weight: 600; }

.admin-message--ok { border-left-color: var(--color-success); }

.admin-message--warn { border-left-color: var(--color-warning); }

.admin-message--error { border-left-color: var(--destructive); }

.muted { color: var(--muted-foreground); }

.danger { color: var(--destructive); }

/* Журнал — список, а не таблица: семь колонок на телефоне не помещаются, и страница уезжала
   вправо на 153 px при 375 px ширины (дизайн-ревью, находка D-2). Список читается на любой
   ширине и не требует второй раскладки. */
.admin-journal {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-journal li {
  padding: var(--admin-space-3) 0;
  border-bottom: 1px solid var(--border);
}

.admin-journal p { margin: 0; }

.admin-journal-when {
  color: var(--muted-foreground);
  font-size: var(--admin-text-sm);
}

.admin-journal-what { font-weight: 600; }

.admin-journal-who {
  color: var(--muted-foreground);
  font-size: var(--admin-text-sm);
}

.admin-journal-change {
  font-size: var(--admin-text-sm);
  overflow-wrap: anywhere;
}

.admin-pager {
  display: flex;
  gap: var(--admin-space-3);
  margin: var(--admin-space-4) 0 0;
  color: var(--muted-foreground);
}

.admin-metrics { margin: 0 0 var(--admin-space-5); }

.admin-metrics dt {
  margin: var(--admin-space-3) 0 0;
  color: var(--muted-foreground);
  font-size: var(--admin-text-sm);
}

.admin-metrics dd {
  margin: var(--admin-space-1) 0 0;
  font-size: var(--admin-text-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Именованное состояние — приглушённым и обычной насыщенностью: иначе «стоимость не
   записывается» читается как значение наравне с числами (дизайн-ревью 390 px). */
.admin-metrics .admin-metrics-state {
  color: var(--muted-foreground);
  font-size: var(--admin-text-base);
  font-weight: 400;
}

/* Галерея датасета (изменение `f18-dataset`): плитки превью колонками по ширине экрана, без
   горизонтальной прокрутки на телефоне. Превью — квадрат обрезкой: пропорции снимков разные, а
   сетка должна оставаться ровной. */
.admin-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--admin-thumb), 1fr));
  gap: var(--admin-space-4);
  margin: var(--admin-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.admin-gallery-item p { margin: var(--admin-space-1) 0; }

.admin-gallery-item form { margin: var(--admin-space-2) 0 0; }

.admin-thumb {
  display: block;
  width: 100%;
  height: var(--admin-thumb);
  object-fit: cover;
  border-radius: var(--admin-radius-sm);
  background: var(--muted);
}

.admin-thumb-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--admin-thumb);
  margin: 0;
  border-radius: var(--admin-radius-sm);
  background: var(--muted);
}

/* Таблица раздела «Рецепты» (изменение `f23-admin-recipes`): на узком экране прокручивается внутри
   своей обёртки, страница горизонтально не прокручивается. */
.admin-table-wrap {
  overflow-x: auto;
  margin: var(--admin-space-3) 0 0;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--admin-text-sm);
}

.admin-table th,
.admin-table td {
  padding: var(--admin-space-2) var(--admin-space-3) var(--admin-space-2) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--muted-foreground);
  font-weight: 400;
}

.admin-recipes-id {
  color: var(--muted-foreground);
  font-size: var(--admin-text-sm);
  overflow-wrap: anywhere;
}

/* Одна колонка по умолчанию, две — когда есть куда. Граница одна: каждая следующая это ещё одно
   состояние, которое кто-то должен проверять. */
@media (min-width: 48rem) {
  .admin-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--admin-space-5);
  }
}