/* ЕДИНЫЙ ИСТОЧНИК ТОКЕНОВ ПРОДУКТА.
 *
 * Отсюда берут цвета, размеры и радиусы ВСЕ страницы: кабинет
 * (/app/), лендинг (/) и страница входа (/login). До 01.09 палитра
 * жила в трёх местах, а страница входа вообще держала цвета
 * захардкоженными — комментарий рядом при этом обещал «те же токены».
 *
 * Правило: новый цвет объявляется ЗДЕСЬ и нигде больше. Второе имя
 * того же значения или цвет, вписанный прямо в правило, роняют
 * архитектурный тест `test_design_tokens.py` — комментарий защитой не
 * является, это уже проверено на практике.
 *
 * ПАЛИТРА NOCTURNE, принята брифом владельца 02.09 — заменяет
 * чёрно-лаймовую от 20.08. Значения взяты из файла дизайн-системы
 * (`_ds/nocturne-2ad7b764.../styles.css` в пакете макетов), а не
 * подобраны: макеты требуют пиксель-в-пиксель.
 *
 * Устройство файла:
 *   1) шкалы и роли системы — имена `--color-*`, ими пишутся НОВЫЕ
 *      экраны, ровно как в макетах;
 *   2) два сигнальных цвета, которых в системе нет;
 *   3) псевдонимы `--wb-*` — старая разметка (9000 строк) ссылается на
 *      них, и переписать её разом нельзя. Псевдоним не создаёт второго
 *      ЗНАЧЕНИЯ: он ссылается на роль, поэтому страж дублей молчит, а
 *      правка роли доезжает до старых экранов сама.
 */

/* ───────────────────────── 1. Система Nocturne ─────────────────── */
:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-2: #a7a1db;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  /* Шкалы построены в OKLCH на одной шкале светлоты: одинаковая
     ступень любой роли совпадает по зрительному весу с другой. */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  /* Вторичная шкала. Верхние три ступени совпадают с основной по
     значению — обе идут к белому, и на светлом конце сходятся. Это
     свойство системы, а не оплошность: названо в стороже поимённо. */
  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  /* Насыщенная заливка. В продукте разрешена ровно в двух местах:
     полоса чисел и финальный блок лендинга. Внутри кабинета не
     применяется — там ground остаётся приглушённым. */
  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Глубина на тёмном фоне — хайрлайн плюс рассеянная тень, а не
     мягкое пятно: на #161826 мягкая тень не видна вовсе. */
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);

/* ─────────────────── 2. Сигнальные цвета (вне системы) ──────────── */
  /* В Nocturne их нет: система про спокойный интерфейс, а нам надо
     говорить «дороже цели» и «работаем в убыток». Выведены в OKLCH на
     светлоте акцента, чтобы не выпадать из палитры по весу.
     Контраст на фоне #161826 посчитан, не подобран: 8.6:1 и 5.8:1. */
  --sig-warn: oklch(0.72 0.125 78);
  --sig-bad:  oklch(0.65 0.150 22);

/* ──────────────── 3. Псевдонимы для старой разметки ─────────────── */
  /* Разметка кабинета ссылается на эти имена в тысячах мест. Пока
     экраны переезжают на макеты по одному, псевдонимы держат старые
     живыми — и меняются вместе с ролью, а не отдельно от неё. */
  --wb-bg: var(--color-bg);
  --wb-card: var(--color-surface);
  /* Плитка внутри карточки рисуется на фоне ЭКРАНА, а не на своей
     поверхности: так глубина читается через светлоту, без теней.
     Проверено по макету — 27 вхождений против 16 у дорожки. */
  --wb-tile: var(--color-bg);
  --wb-chip: var(--color-neutral-900);
  --wb-accent-soft: var(--color-neutral-900);
  --wb-border: var(--color-divider);
  --wb-text: var(--color-text);
  --wb-text-secondary: color-mix(in srgb, var(--color-text) 62%, transparent);
  --wb-text-muted: color-mix(in srgb, var(--color-text) 45%, transparent);
  --wb-text-placeholder: color-mix(in srgb, var(--color-text) 30%, transparent);
  --wb-accent: var(--color-accent);
  --wb-accent-deep: var(--color-accent-700);
  --wb-accent-pressed: var(--color-accent-600);
  /* Текст НА акценте. Остаётся чёрным и на фиолетовом: контраст
     чёрного 6.51:1 против белого 3.23:1 — посчитано, а не выбрано по
     привычке ставить белый на фиолетовый. В макетах первичная кнопка
     вообще контурная, так что заливок с текстом почти не осталось. */
  --wb-accent-text: #000000;
  --wb-accent-muted: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --wb-amber: var(--sig-warn);
  --wb-amber-icon: var(--sig-warn);
  --wb-amber-bg: color-mix(in srgb, var(--sig-warn) 16%, transparent);
  --wb-warning: var(--sig-warn);
  --wb-red: var(--sig-bad);
  --wb-red-bg: color-mix(in srgb, var(--sig-bad) 14%, transparent);
  /* Фирменный цвет самого Wildberries — не наш и не меняется. */
  --wb-brand: #CB11AB;
  --chart-sales: var(--color-accent);
  /* Вторая линия графика обязана отличаться от первой — иначе
     сравнивать нечего. Берём сигнальный янтарь, он и так в палитре. */
  --chart-spend: var(--sig-warn);
  --chart-grid: color-mix(in srgb, var(--color-text) 8%, transparent);

  /* Шкала размеров: в Nocturne её нет, остаётся наша. */
  --fs-display: 56px;
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-tile: 32px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-label: 12px;
  --radius-card: var(--radius-lg);
  --radius-tile: var(--radius-md);
  --radius-chip: var(--radius-md);

  /* ── Типографика раздела «Продвижение» ──
     Шкала из индекса дизайн-системы: десять ступеней. Ступени N2/T1 и
     L1/T2 отличаются ВЕСОМ, а не размером — 15px и 13px берутся из
     общих --fs-body и --fs-body-sm, а вес называет ступень. */
  --fs-n0-pr: 44px;
  --fs-h1-pr: 24px;
  --fs-n1-pr: 22px;
  --fs-h2-pr: 17px;
  --fs-l2-pr: 11px;
  --fw-n2-pr: 600;
  --fw-strong-pr: 600;
  --fw-l1-pr: 500;
  --fw-t1-pr: 500;
  --fw-t2-pr: 400;

  /* Дорожка полос и выключенный тумблер: по ней видно, докуда полоса
     НЕ доросла. По системе — нейтраль 900. */
  --wb-track: var(--color-neutral-900);
  --pr-line: color-mix(in srgb, var(--color-text) 8%, transparent);
  --pr-dim62: color-mix(in srgb, var(--color-text) 62%, transparent);
  /* «Едва заметный» — отдельная ступень 42%, не путать с приглушённым 45%. */
  --pr-dim42: color-mix(in srgb, var(--color-text) 42%, transparent);
}