/* Bakasana — токены. Единственное место, где живут значения.
   Ни один компонент не имеет права держать цвет, размер или тень числом:
   если значение встречается в двух местах — оно должно быть здесь.

   Канон снят замером с боевого сайта 12.08.26 (D-0024): заголовки #222,
   текст #333, акцент #48bbc0, радиус 10. Ниже он не переизобретён, а достроен
   тем, чего в замере не было: поверхностями, тенями, движением и тёмной темой.

   Тёмная тема — те же роли с другими значениями. Никаких «тёмных компонентов»:
   если компонент правильно берёт роль, он темнеет сам. */

:root {
  /* ── поверхности и текст ─────────────────────────────────────── */
  --bg:            #ffffff;   /* фон страницы */
  --surface:       #ffffff;   /* карточки, шапка */
  --surface-soft:  #f5f4f1;   /* мягкая подложка: плашки, обложки-заглушки */
  --surface-sunk:  #ebe9e4;   /* утопленное: дорожка прогресса, скелетон */
  --ink:           #222222;   /* заголовки и главное действие */
  --text:          #333333;   /* основной текст */
  --text-dim:      #5b5b5b;   /* подписи, второстепенное */
  --on-ink:        #ffffff;   /* текст на тёмной заливке */
  --hairline:      #e6e4df;   /* границы в один пиксель */
  --overlay:       rgba(34, 34, 34, .45);   /* затемнение под шторкой */

  /* ── акцент и статусы ────────────────────────────────────────── */
  --accent:        #48bbc0;
  --accent-ink:    #12615f;   /* акцентный текст: на белом бирюза не читается */
  --accent-soft:   rgba(72, 187, 192, .14);
  --ok:            #2f7d5a;   --ok-soft:   rgba(47, 125, 90, .10);
  --warn:          #a8631a;   --warn-soft: rgba(168, 99, 26, .10);
  --err:           #b3261e;   --err-soft:  rgba(179, 38, 30, .10);

  /* ── подъём: две ступени, больше не заводим ──────────────────────
     Глубину задаёт пара «поверхность + тень». На светлом работает тень,
     на тёмном — поверхность: чёрная тень на тёмном фоне не видна вовсе,
     поэтому приподнятый слой там становится светлее, а тень только смягчает край.
     Третьей ступени не было нужно ни разу — не держим. */
  --surface-raised: #ffffff;                        /* карточка под курсором, шторка */
  --shadow-raise: 0 4px 16px rgba(34, 34, 34, .10);
  --shadow-sheet: 0 -8px 32px rgba(34, 34, 34, .16);   /* шторка снизу — тень уходит вверх */

  /* ── отступы: шаг 4, от --sp-1 до --sp-8 ─────────────────────── */
  --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ── шрифты ──────────────────────────────────────────────────── */
  /* Заголовки плотные (Roboto Condensed) — преемственность с боевым
     Proxima Nova Bold Condensed. Текст — Source Sans 3, открытый родственник
     Myriad Pro, в котором дизайнер верстает плакаты. Кириллица у обоих
     проверена до выбора: Archivo, например, её просто не имеет.
     Веса ограничены тем, что реально загружено: 400 и 600 у текста, 700 у заголовков. */
  --font:      'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Roboto Condensed', 'Source Sans 3', system-ui, sans-serif;

  /* Шкала кеглей. Нижняя ступень — 13: аудитория проекта читает с телефона,
     и всё, что мельче, на длинных названиях на санскрите превращается в шум.
     У чужих китов внизу стоит 10-11 px — нам туда нельзя. */
  --fs-xs:   13px;   /* подписи под карточкой, счётчики */
  --fs-sm:   14px;   /* второстепенный текст */
  --fs-base: 16px;   /* основной */
  --fs-md:   18px;   /* заголовок карточки */
  --fs-lg:   20px;   /* H3, H2 */
  --fs-xl:   clamp(22px, 3.2vw, 26px);
  --fs-2xl:  clamp(26px, 4vw, 34px);        /* H1 страницы */
  --fs-display: clamp(32px, 7vw, 60px);     /* обложка раздела */

  --lh-tight: 1.12;   /* заголовки */
  --lh-snug:  1.35;   /* названия карточек в две строки */
  --lh-base:  1.55;   /* текст */

  /* ── форма ───────────────────────────────────────────────────── */
  /* Пропорция обложки — КВАДРАТ. Замер 31.08.26 по всем 120 обложкам витрины:
     118 штук 1080×1080, две вертикальные 1080×1350 (их редактору переснять).
     Раньше здесь стояло 4:3 — я вывел это из имени файла «BKSN_pict2026_4-3»,
     а не из самих картинок. Имя оказалось про номер варианта, а не про пропорцию. */
  --cover:       1 / 1;
  --radius:      10px;    /* один радиус на всё: карточки, поля, плашки */
  --radius-sm:   6px;     /* мелкое: бейдж внутри карточки */
  --radius-pill: 999px;   /* кнопки и чипы — пилюли, фирменная черта */
  /* Подвал: радиус — канон плашек (слово Pet 23.09.26; было 50 — замер с боевого, выбивался из кита).
     Тёмная панель — своими токенами, а не --ink: в тёмной теме --ink светлеет, и панель
     выворачивалась в светлую плиту на тёмной странице (поймал Pet 23.09.26). */
  --foot-radius:  var(--radius-lg);
  --foot-main:    var(--ink);      /* тёмная панель подвала */
  --foot-main-fg: var(--on-ink);   /* текст и логотип на ней */
  --foot-soft:    #e9e9e7;         /* светлая панель подвала — замер с боевого */
  --tap:         44px;    /* минимальная зона нажатия пальцем */
  --tap-sm:      36px;    /* компактная кнопка: только рядом с крупной целью */

  /* ── раскладка ───────────────────────────────────────────────── */
  --content: 1360px;   /* холст ПК — решение Pet 29.08.26 по референсу «Синхронизации» */
  --gutter:  var(--sp-5);
  --st-break: 768px;   /* единственный структурный брейк, зеркало для JS;
                          в @media идёт литералом — var() там не работает */

  /* ── движение ────────────────────────────────────────────────── */
  --dur-1: 120ms;   /* отклик на нажатие */
  --dur-2: 200ms;   /* смена состояния, наведение */
  --dur-3: 320ms;   /* шторка, крупное появление */
  --ease:  cubic-bezier(.2, .7, .3, 1);

  /* ── слои ────────────────────────────────────────────────────── */
  --z-header: 100;
  --z-sheet:  200;
  --z-toast:  300;
}

/* ── тёмная тема ───────────────────────────────────────────────────
   Фон не чёрный, а тёплый уголь: бренд у проекта тёплый (подложка #f5f4f1),
   и холодный графит рядом с бирюзой даёт больничный оттенок.
   Акцент подсвечен — #48bbc0 на тёмном теряет насыщенность. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #1a1a19;
    --surface:       #232322;
    --surface-soft:  #2b2b29;
    --surface-sunk:  #333330;
    --ink:           #f7f5f1;
    --text:          #e2e0da;
    --text-dim:      #a5a29b;
    --on-ink:        #1a1a19;
    --hairline:      #3a3a37;
    --overlay:       rgba(0, 0, 0, .6);

    --accent:        #5ecfd4;
    --accent-ink:    #8fe0e3;
    --accent-soft:   rgba(94, 207, 212, .16);
    --ok:   #67c39a;  --ok-soft:   rgba(103, 195, 154, .14);
    --warn: #e0a055;  --warn-soft: rgba(224, 160, 85, .14);
    --err:  #f0857c;  --err-soft:  rgba(240, 133, 124, .14);

    /* На тёмном тень почти не читается — подъём даёт поверхность, а не тень. */
    --surface-raised: #2e2e2b;
    --foot-soft:    #2b2b29;
    --foot-main:    var(--surface);  /* панель остаётся тёмной ступенью над фоном */
    --foot-main-fg: var(--ink);
    --shadow-raise: 0 6px 22px rgba(0, 0, 0, .55);
    --shadow-sheet: 0 -10px 36px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  --bg:            #1a1a19;
  --surface:       #232322;
  --surface-soft:  #2b2b29;
  --surface-sunk:  #333330;
  --ink:           #f7f5f1;
  --text:          #e2e0da;
  --text-dim:      #a5a29b;
  --on-ink:        #1a1a19;
  --hairline:      #3a3a37;
  --overlay:       rgba(0, 0, 0, .6);

  --accent:        #5ecfd4;
  --accent-ink:    #8fe0e3;
  --accent-soft:   rgba(94, 207, 212, .16);
  --ok:   #67c39a;  --ok-soft:   rgba(103, 195, 154, .14);
  --warn: #e0a055;  --warn-soft: rgba(224, 160, 85, .14);
  --err:  #f0857c;  --err-soft:  rgba(240, 133, 124, .14);

  /* На тёмном тень почти не читается — подъём даёт поверхность, а не тень. */
  --surface-raised: #2e2e2b;
  --foot-soft:    #2b2b29;
  --foot-main:    var(--surface);
  --foot-main-fg: var(--ink);
  --shadow-raise: 0 6px 22px rgba(0, 0, 0, .55);
  --shadow-sheet: 0 -10px 36px rgba(0, 0, 0, .7);
}

@media (max-width: 767px) {
  /* Нижняя ступень кегля на телефоне — 14, не 13 (слово Pet 09.09.26).
     Замер: на медиатеке 422 элемента идут по --fs-xs — мета карточек, счётчики,
     бейджи. Их читает та же аудитория, что и текст, только в ладони.
     ⚠️ Побочное: на телефоне ступень xs и sm сходится в одну — разницу между
     подписью и второстепенным текстом там держит ЦВЕТ (--text-dim), а не кегль.
     На ПК шкала не меняется: 13 px стои́т на расстоянии вытянутой руки. */
  :root { --gutter: var(--sp-4); --fs-xs: 14px; }
}

/* ── акцент записи ─────────────────────────────────────────────────
   У каждой записи свой тон, снятый с её собственной обложки
   (products.accent_hue, посчитан один раз на ноуте). В разметку уезжает
   ОДНО число — градусы; светлоту и насыщенность держит тема.

   Почему так, а не готовые цвета в базе: цвет с обложки, взятый как есть,
   в половине случаев не читается — у одной обложки он почти чёрный, у другой
   кислотный, и каждую пришлось бы подбирать руками. Тон же можно взять любой:
   плашка всё равно выйдет той же светлоты, что у соседней записи, а тёмная
   тема пересчитает её сама. Сто двадцать записей — сто двадцать оттенков,
   и ни одного ручного решения.

   Тона нет — работает бирюза бренда, страница не ломается. */
/* 🪤 Производные тона объявлены НЕ только в :root, но и на .rec-tone — и это
   не дубль. var() внутри пользовательского свойства подставляется там, где
   свойство ОБЪЯВЛЕНО, а не там, где используется: пока --rec-soft жил только
   в :root, он навсегда считался по корневому тону, и страница с розовой
   обложкой оставалась бирюзовой, хотя --rec-h долетал до неё правильно
   (замерено в браузере 01.09.26). Поэтому элемент, который задаёт тон,
   пересчитывает и производные — класс .rec-tone ставится рядом со стилем
   --rec-h и делает ровно это. */
:root, .rec-tone {
  --rec-soft: oklch(0.965 0.030 var(--rec-h));    /* заливка плашки */
  --rec-line: oklch(0.900 0.045 var(--rec-h));    /* граница на плашке */
  /* Светлота 0.56, а не 0.62: на бирюзовых тонах (около 190°) иконка на своей
     же плашке давала 2.96 против порога 3 для графики. Перебрано все 360
     градусов — на 0.56 худший случай 3.71. */
  --rec-tint: oklch(0.560 0.140 var(--rec-h));    /* иконки и мелкие метки */
  --rec-ink:  oklch(0.420 0.120 var(--rec-h));    /* текст на плашке */
}

:root {
  --rec-h: 186;                                   /* запасной тон — бренд */

  /* Крупный радиус — только для секций-плашек. Замер канона, на который
     показал Pet: у секции во всю ширину радиус заметно больше, чем у карточек
     внутри неё, и именно эта пара ступеней читается как «плашки». */
  --radius-lg: 28px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) .rec-tone {
    --rec-soft: oklch(0.255 0.032 var(--rec-h));
    --rec-line: oklch(0.340 0.045 var(--rec-h));
    --rec-tint: oklch(0.740 0.130 var(--rec-h));
    --rec-ink:  oklch(0.860 0.090 var(--rec-h));
  }
}

:root[data-theme="dark"], :root[data-theme="dark"] .rec-tone {
  --rec-soft: oklch(0.255 0.032 var(--rec-h));
  --rec-line: oklch(0.340 0.045 var(--rec-h));
  --rec-tint: oklch(0.740 0.130 var(--rec-h));
  --rec-ink:  oklch(0.860 0.090 var(--rec-h));
}

/* Браузер без oklch — уходим на бирюзу бренда. Тон при этом просто
   не работает, а вёрстка остаётся на месте. */
@supports not (color: oklch(0.5 0.1 180)) {
  :root, .rec-tone {
    --rec-soft: var(--accent-soft);
    --rec-line: var(--hairline);
    --rec-tint: var(--accent);
    --rec-ink:  var(--accent-ink);
  }
}