/* ============================================================================
   Enso-nexus — токены интерфейса. Единственный источник цветов, шрифтов,
   отступов, радиусов, теней, движения и слоёв (политика UI-1, UI-2, CH-08).

   Этап 2 политики (07.10.2026). Значения действующих токенов перенесены из
   styles.css (строки 8–127) и shell.css (строки 16–20) БЕЗ изменений: вид
   платформы при подключении файла не меняется. Новые имена (шкалы отступов,
   шрифтов, движения, слоёв, фокуса, точек перелома) — предложение этапа 2,
   принимается вместе с ним.

   Подключение: <link rel="stylesheet" href="tokens.css?v=1"> ПЕРЕД styles.css
   на каждой странице. Пока файл подключён не везде, те же значения остаются
   в styles.css и shell.css; их удаление оттуда — задача аудита (этап 6),
   по одной странице за раз. Новая функция подключает tokens.css сразу.

   Правило имён: --<группа>-<шаг или роль>. Цвет называется ролью (--text-2,
   --accent), не оттенком. Значение цвета в правилах CSS — только var().
   ========================================================================== */

/* ── 1. Действующие токены: светлая тема (из styles.css) ─────────────────── */

:root {
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --font-display: "New York", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --accent: #b95740;          /* терракота: действия, активная навигация */
  --accent-press: #a34732;
  --accent-contrast: #fdfbf4; /* текст поверх терракоты */
  --progress-tail: #8f3b2b;   /* тёмный конец градиента полосы прогресса */
  --data: #4a6b8a;            /* архивный синий: данные, форматы, загрузка */
  --green: #4f7d58;
  --orange: #b07e36;
  --red: #a93e2c;
  /* Заголовок «Выполняется анализ» — тушь и терракота, дуэт всей платформы.
     Золотой цвет прежней точки-индикатора выбивался из палитры: в карточке
     он был единственным, чего больше нет нигде. Значения — ссылки на токены
     темы, поэтому в тёмной подхватываются сами и переопределять их не нужно
     (тушь 15.4:1 в светлой и 12.5:1 в тёмной, гребень волны — 5.8:1 и 5.3:1). */
  --progress-title: var(--text);
  --progress-title-glow: var(--accent-press);

  --bg: #f3efe6;
  --bg-gradient: radial-gradient(1100px 650px at 85% -10%, rgba(185, 87, 64, .05), transparent 60%),
                 radial-gradient(850px 550px at -10% 110%, rgba(74, 107, 138, .05), transparent 55%);
  --panel: rgba(253, 251, 244, .78);
  --panel-solid: #fdfbf4;
  --sidebar: rgba(243, 238, 229, .86);
  --stroke: rgba(62, 50, 35, .16);
  --stroke-soft: rgba(62, 50, 35, .09);
  --text: #26211b;
  --text-2: #6f665a;
  --text-3: #857b6e;
  --fill: rgba(120, 105, 85, .10);
  --fill-hover: rgba(120, 105, 85, .17);
  --shadow: 0 1px 2px rgba(70, 55, 35, .05), 0 8px 24px rgba(70, 55, 35, .07);
  --shadow-pop: 0 4px 12px rgba(70, 55, 35, .12), 0 16px 40px rgba(70, 55, 35, .16);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  /* Жидкое стекло — материал СЛОЯ УПРАВЛЕНИЯ (шапки, панели, меню, модалки,
     тосты). Контент остаётся «бумагой»: текст не живёт на сильном блюре.
     Кромка (--glass-rim-*) — спекулярный блик по периметру: свет ловится
     слева сверху, гаснет и возвращается в правом нижнем углу. */
  --glass: rgba(252, 249, 241, .52);
  --glass-strong: rgba(253, 251, 244, .74);
  --glass-rim-hi: rgba(255, 255, 255, .85);
  --glass-rim-lo: rgba(255, 255, 255, .18);
  --glass-glow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(62, 50, 35, .05);
  --glass-shadow: 0 4px 14px rgba(70, 55, 35, .08), 0 18px 48px rgba(70, 55, 35, .12);
  --glass-blur: 26px;
  /* насыщенность умеренная: 1.8 поднимала край радиального градиента фона
     до видимого шва поперёк капсулы */
  --glass-sat: 1.45;
}

/* ── 2. Действующие токены: тёмная тема (из styles.css) ─────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #d0715a;
    --accent-press: #db8069;
    --accent-contrast: #26211b;
    --progress-tail: #b05a44;
    --data: #7fa0bf;
    --green: #7fa97f;
    --orange: #cc9a55;
    --red: #cf7259;
    --bg: #201c17;
    --bg-gradient: radial-gradient(1100px 650px at 85% -10%, rgba(208, 113, 90, .07), transparent 60%),
                   radial-gradient(850px 550px at -10% 110%, rgba(127, 160, 191, .06), transparent 55%);
    --panel: rgba(41, 36, 30, .72);
    --panel-solid: #292420;
    --sidebar: rgba(32, 28, 23, .86);
    --stroke: rgba(235, 220, 195, .15);
    --stroke-soft: rgba(235, 220, 195, .08);
    --text: #eee7db;
    --text-2: #a89c8c;
    --text-3: #9a8f80;
    --fill: rgba(180, 160, 130, .13);
    --fill-hover: rgba(180, 160, 130, .22);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-pop: 0 4px 12px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
    --glass: rgba(41, 36, 30, .5);
    --glass-strong: rgba(45, 40, 33, .68);
    --glass-rim-hi: rgba(255, 244, 226, .32);
    --glass-rim-lo: rgba(255, 244, 226, .06);
    --glass-glow: inset 0 1px 0 rgba(255, 244, 226, .13), inset 0 -1px 0 rgba(0, 0, 0, .3);
    --glass-shadow: 0 4px 14px rgba(0, 0, 0, .38), 0 18px 48px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --accent: #d0715a;
  --accent-press: #db8069;
  --accent-contrast: #26211b;
  --progress-tail: #b05a44;
  --data: #7fa0bf;
  --green: #7fa97f;
  --orange: #cc9a55;
  --red: #cf7259;
  --bg: #201c17;
  --bg-gradient: radial-gradient(1100px 650px at 85% -10%, rgba(208, 113, 90, .07), transparent 60%),
                 radial-gradient(850px 550px at -10% 110%, rgba(127, 160, 191, .06), transparent 55%);
  --panel: rgba(41, 36, 30, .72);
  --panel-solid: #292420;
  --sidebar: rgba(32, 28, 23, .86);
  --stroke: rgba(235, 220, 195, .15);
  --stroke-soft: rgba(235, 220, 195, .08);
  --text: #eee7db;
  --text-2: #a89c8c;
  --text-3: #9a8f80;
  --fill: rgba(180, 160, 130, .13);
  --fill-hover: rgba(180, 160, 130, .22);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
  --glass: rgba(41, 36, 30, .5);
  --glass-strong: rgba(45, 40, 33, .68);
  --glass-rim-hi: rgba(255, 244, 226, .32);
  --glass-rim-lo: rgba(255, 244, 226, .06);
  --glass-glow: inset 0 1px 0 rgba(255, 244, 226, .13), inset 0 -1px 0 rgba(0, 0, 0, .3);
  --glass-shadow: 0 4px 14px rgba(0, 0, 0, .38), 0 18px 48px rgba(0, 0, 0, .45);
}

/* ── 3. Действующие токены каркаса (из shell.css) ───────────────────────── */

:root {
  --content-w: 1200px;
  --page-pad: 48px;
  --sidebar-w: 252px;   /* одно значение и для ширины, и для сдвига (styles.css брал 236) */
}

/* ── 4. Новые шкалы (предложение этапа 2, CH-09) ────────────────────────── */

:root {
  /* Отступы. Шкала кратна 2 до 12 px и 8 — выше: платформа плотная,
     6 и 10 px встречаются в css 160 раз и остаются законными шагами.
     Новые правила берут отступ только отсюда; литералы в старом css —
     долг аудита. */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* Шрифты: шкала размеров. Сегодня в css 26 разных размеров, из них четыре
     полупиксельных (10.5, 11.5, 12.5, 13.5 — 167 употреблений). Шкала
     целочисленная; полупиксели сводятся к соседнему шагу при аудите. */
  --fs-11: 11px;    /* подписи-капители, счётчики */
  --fs-12: 12px;    /* подсказки, вторичный текст */
  --fs-13: 13px;    /* основной текст интерфейса */
  --fs-14: 14px;    /* текст полей и ответов */
  --fs-15: 15px;    /* акцентный текст */
  --fs-17: 17px;    /* подзаголовок, вопрос */
  --fs-20: 20px;    /* h2 */
  --fs-26: 26px;    /* h1 */
  --fs-36: 36px;    /* витрина, крупные числа */
  --lh-tight: 1.2;
  --lh-text: 1.5;
  --lh-loose: 1.6;
  --fw-regular: 400;
  --fw-medium: 590;   /* SF Pro: «medium» между 500 и 600, в css 17 раз */
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-text: .005em;
  --ls-caps: .07em;   /* капители и eyebrow */

  /* Радиусы: к действующим --radius, --radius-sm, --radius-lg добавлены
     малый, капсула и круг (999px — 38 употреблений, 50% — 21). */
  --radius-xs: 4px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Движение (UI-15, CH-12): .15s — 58 переходов из 85. */
  --dur-quick: .15s;
  --dur-base: .22s;
  --dur-slow: .28s;
  --ease: ease;
  --ease-out: cubic-bezier(.4, 0, .2, 1);

  /* Фокус (AX-3): кольцо как у полей сегодня. */
  --focus-ring: 0 0 0 3.5px color-mix(in srgb, var(--accent) 20%, transparent);
  --focus-outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);

  /* Слои (z-index): сегодня 14 разных значений, сведены к семи ролям. */
  --z-raised: 2;
  --z-sticky: 30;
  --z-bar: 40;
  --z-drawer: 60;
  --z-modal: 110;
  --z-menu: 120;
  --z-toast: 136;

  /* Точки перелома — справочно: в @media переменные не работают, список
     закрепляется в CHECKS.md (CH-09). Сегодня в css восемь точек
     (640, 700, 760, 800, 860, 1000, 1100, 1180); предложение — четыре. */
  --bp-phone: 640px;
  --bp-tablet: 800px;
  --bp-laptop: 1100px;
  --bp-wide: 1440px;
}

/* ── 5. Повышенный контраст (Apple HIG, Color: светлый, тёмный и контрастный
   варианты у каждого цвета; UI-2, CH-10). Сегодня варианта нет; значения
   подобраны так, чтобы вторичный текст давал не меньше 7:1 на фоне. ─────── */

@media (prefers-contrast: more) {
  :root {
    --text-2: #4f483e;
    --text-3: #554e44;
    --stroke: rgba(62, 50, 35, .32);
    --stroke-soft: rgba(62, 50, 35, .2);
    --glass: rgba(252, 249, 241, .88);
    --glass-strong: rgba(253, 251, 244, .96);
    --panel: rgba(253, 251, 244, .96);
  }
  :root[data-theme="dark"] {
    --text-2: #c9bdac;
    --text-3: #bdb1a0;
    --stroke: rgba(235, 220, 195, .32);
    --stroke-soft: rgba(235, 220, 195, .18);
    --glass: rgba(41, 36, 30, .9);
    --glass-strong: rgba(45, 40, 33, .96);
    --panel: rgba(41, 36, 30, .96);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-2: #c9bdac;
    --text-3: #bdb1a0;
    --stroke: rgba(235, 220, 195, .32);
    --stroke-soft: rgba(235, 220, 195, .18);
    --glass: rgba(41, 36, 30, .9);
    --glass-strong: rgba(45, 40, 33, .96);
    --panel: rgba(41, 36, 30, .96);
  }
}