/* VELAR · слой 1 — токены (этап «Палитра, вордмарк и токены», 2026-10-30).
   Подключается ПЕРВЫМ на каждой странице, до 02-components.css (страж — tests/ds-tokens-layer.test.cjs).
   Три уровня: примитив (--palette-*) → семантика (--color-*, роль) → компонент (крючки --button-*, --field-*, … в
   02-components.css и собственные свойства страниц — только ссылки var(), без hex). Hex в CSS проекта — только здесь;
   исключения перечислены в docs/design-audit/screens/palette-tokens.md (письма, SVG-знаки, meta theme-color,
   слои лендинга до свёртки — счётчик в тесте-страже не растёт).

   Палитра одна: чёрный с янтарём. Акцент #FFB240 — только главное действие и одно выделение на экран;
   предупреждение — свой лимонный тон, не акцент; опасность и успех — всегда со словом. Решение и замеры —
   docs/design-audit/screens/palette-tokens.md.

   Имена примитивов: семейство + номер = 1000 − OKLCH L × 1000 (больше — темнее): --palette-grey-871 = #06070B.
   Значения взяты как есть из страниц, где палитра остаётся, — сдвиг цвета на них 0. */

:root {
  /* ——— Примитивы ——— */
  /* серые (тёплые и холодные нейтрали страниц) */
  --palette-grey-000: #FFFFFF;
  --palette-grey-009: #FCFCFB;
  --palette-grey-011: #FDFBF8;
  --palette-grey-012: #FBFBFD;
  --palette-grey-019: #F7F9FC;
  --palette-grey-020: #FAF8F4;
  --palette-grey-041: #F4F1EB;
  --palette-grey-042: #F0F1F5;
  --palette-grey-044: #EEF0F7;
  --palette-grey-048: #F0EFEC;
  --palette-grey-049: #F3EEE6;
  --palette-grey-059: #EFEBE4;
  --palette-grey-060: #EEEBE5;
  --palette-grey-083: #E3E3E8;
  --palette-grey-089: #E6E1D8;
  --palette-grey-093: #D9E1EB;
  --palette-grey-094: #E1E0D9;
  --palette-grey-097: #E8DDD0;
  --palette-grey-100: #E3DDD3;
  --palette-grey-105: #D9DCE7;
  --palette-grey-135: #D6D2CB;
  --palette-grey-188: #C3C2B7;
  --palette-grey-227: #ADB5C7;
  --palette-grey-258: #A3ABC0;
  --palette-grey-273: #ABA69E;
  --palette-grey-296: #9AA0AB;
  --palette-grey-325: #8F96AC;
  --palette-grey-336: #8A94A6;
  --palette-grey-337: #9A9288;
  --palette-grey-338: #92929C;
  --palette-grey-339: #8B92A6;
  --palette-grey-377: #898781;
  --palette-grey-387: #8A8378;
  --palette-grey-474: #6A6A70;
  --palette-grey-475: #6E6A64;
  --palette-grey-476: #6B6A65;
  --palette-grey-483: #646871;
  --palette-grey-485: #5E6879;
  --palette-grey-497: #6A635A;
  --palette-grey-504: #5E626B;
  --palette-grey-510: #6A5E52;
  --palette-grey-565: #52514E;
  --palette-grey-585: #4B4B50;
  --palette-grey-623: #3B4153;
  --palette-grey-634: #3A3F47;
  --palette-grey-648: #343B4A;
  --palette-grey-664: #3B362F;
  --palette-grey-678: #30333D;
  --palette-grey-696: #2A2E3D;
  --palette-grey-708: #2C2C2A;
  --palette-grey-719: #242935;
  --palette-grey-731: #23262E;
  --palette-grey-741: #20232F;
  --palette-grey-760: #241E18;
  --palette-grey-765: #1A1E27;
  --palette-grey-768: #1D1D1F;
  --palette-grey-794: #1A1712;
  --palette-grey-804: #12151C;
  --palette-grey-806: #111420;
  --palette-grey-807: #12141C;
  --palette-grey-810: #17130E;
  --palette-grey-823: #0D1118;
  --palette-grey-835: #100E0C;
  --palette-grey-836: #0C0E14;
  --palette-grey-841: #0B0D12;
  --palette-grey-850: #0B0B0B;
  --palette-grey-851: #090B0F;
  --palette-grey-871: #06070B;
  /* янтарь — акцент */
  --palette-amber-113: #FFD37A;
  --palette-amber-115: #FFD189;
  --palette-amber-142: #FAC862;
  --palette-amber-145: #FFC45F;
  --palette-amber-169: #FFB760;
  --palette-amber-182: #FFB240;
  --palette-amber-189: #FAB219;
  --palette-amber-236: #EDA100;
  --palette-amber-248: #F7931A;
  --palette-amber-310: #D08A33;
  --palette-amber-330: #C98500;
  --palette-amber-365: #B57E2E;
  --palette-amber-508: #8A5200;
  --palette-amber-529: #7A5200;
  --palette-amber-550: #6A502C;
  --palette-amber-799: #1F1405;
  /* оранжевый (рынок, графики) */
  --palette-orange-283: #EC835A;
  --palette-orange-329: #EB6834;
  --palette-orange-378: #D95926;
  --palette-orange-501: #9D4600;
  --palette-orange-503: #9A470B;
  /* красный — опасность и убыток */
  --palette-red-223: #FF9296;
  --palette-red-266: #FF7B6E;
  --palette-red-309: #FF5C5C;
  --palette-red-314: #FF5C36;
  --palette-red-421: #CB454A;
  --palette-red-499: #B3261E;
  /* зелёный — успех и рост */
  --palette-green-180: #5BE0AD;
  --palette-green-225: #2FD49A;
  --palette-green-331: #1BAF7A;
  --palette-green-379: #199E70;
  --palette-green-380: #0CA30C;
  --palette-green-468: #087F64;
  --palette-green-517: #066F57;
  --palette-green-567: #006300;
  /* лимонный — внимание */
  --palette-yellow-090: #FFE066;
  --palette-yellow-476: #7A6A00;
  --palette-yellow-523: #6B5D00;
  /* синий — сведения и графики */
  --palette-blue-236: #86B6EF;
  --palette-blue-283: #6DA7EC;
  --palette-blue-329: #5598E7;
  --palette-blue-378: #3987E5;
  --palette-blue-425: #2A78D6;
  --palette-blue-449: #0672CE;
  --palette-blue-473: #256ABF;
  --palette-blue-502: #54647A;
  --palette-blue-538: #315B88;
  --palette-blue-746: #172334;
  --palette-blue-747: #1A2233;

  /* ——— Семантика: тёмная тема (по умолчанию) ——— */
  --color-bg: var(--palette-grey-871); /* фон страницы */
  --color-surface-sunken: var(--palette-grey-841); /* утопленная поверхность: поле, шапка */
  --color-surface: var(--palette-grey-804); /* карточка, панель, окно */
  --color-surface-raised: var(--palette-grey-765); /* приподнятая: строка при наведении, плитка внутри карточки */
  --color-surface-overlay: var(--palette-grey-719); /* меню, подсказка */
  --color-text-1: var(--palette-grey-049); /* основной текст, цифры */
  --color-text-2: var(--palette-grey-135); /* вторичный текст */
  --color-text-3: var(--palette-grey-273); /* подписи, служебное (≥ 4,5:1 к поверхности) */
  --color-text-4: var(--palette-grey-475); /* неактивное и декоративное — не для текста, который надо прочесть */
  --color-rule: var(--palette-grey-731); /* разделитель, рамка карточки */
  --color-rule-strong: var(--palette-grey-504); /* заметная черта: ось, рамка второстепенной кнопки */
  --color-rule-control: var(--palette-grey-483); /* рамка поля и контрола (≥ 3:1 к поверхности, WCAG 1.4.11) */
  --color-focus: var(--palette-amber-113); /* кольцо фокуса */
  --color-accent: var(--palette-amber-182); /* главное действие и одно выделение на экран */
  --color-accent-hover: var(--palette-amber-142); /* главное действие при наведении */
  --color-accent-ink: var(--palette-amber-799); /* текст и иконка на заливке акцента */
  --color-accent-text: var(--palette-amber-182); /* акцент как текст (ссылка, надзаголовок) */
  --color-danger: var(--palette-red-266); /* опасность: точка, рамка, иконка; всегда со словом */
  --color-danger-ink: var(--palette-red-223); /* текст опасности (на поверхности и на -bg) */
  --color-success: var(--palette-green-225); /* успех: точка, рамка, иконка; всегда со словом */
  --color-success-ink: var(--palette-green-180); /* текст успеха (светлая: темнее точки — ≥ 4,5:1 и на фоне, и на -bg) */
  --color-warn: var(--palette-yellow-090); /* внимание: отдельный тон, не акцент; всегда со словом */
  --color-warn-ink: var(--palette-yellow-090); /* текст внимания (светлая: темнее точки — ≥ 4,5:1 на -bg) */
  --color-info-bg: var(--palette-blue-747); /* полоса сведений: плашка стартового режима */
  --color-info-ink: var(--palette-grey-049); /* текст на полосе сведений */
  --color-danger-bg: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); /* полоса и плашка опасности */
  --color-success-bg: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));
  --color-warn-bg: color-mix(in srgb, var(--color-warn) 16%, var(--color-surface));
  --color-accent-bg: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); /* выделенная строка, заметка */
  --color-info-rule: color-mix(in srgb, var(--color-accent) 35%, transparent); /* черта под плашкой стартового режима */
  --color-scrim: color-mix(in srgb, var(--color-bg) 72%, transparent); /* затемнение под окном */
  --color-print-paper: var(--palette-grey-000); /* печать: бумага */
  --color-print-ink: var(--palette-grey-794); /* печать: текст */
  --color-print-muted: var(--palette-grey-497); /* печать: подписи */
  --color-print-rule: var(--palette-grey-100); /* печать: линии */
  --color-print-danger: var(--palette-red-499); /* печать: опасность */
  --color-print-warn: var(--palette-yellow-476); /* печать: внимание */

  /* ——— Шкалы ——— */
  /* Кегль: 12 служебное · 14 подпись · 16 текст · 20 заголовок блока · 24 · 32 заголовок экрана · 40 · 48 · 88 первый экран. */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-88: 88px;
  /* Отступ: шаг 4, ритм 8. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  /* Радиус: 10 контрол · 14 карточка · 16 окно · 999 пилюля. */
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-window: 16px;
  --radius-pill: 999px;
  /* Движение: 150 мс — смена состояния, 200 мс — появление и раскрытие; ease-out; без пружин. */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-ease: ease-out;
}

/* ——— Светлая тема счёта: cabinet-theme.js ставит body[data-theme="light"]. Те же роли — другие примитивы. ——— */
[data-theme="light"] {
  --color-bg: var(--palette-grey-041);
  --color-surface-sunken: var(--palette-grey-020);
  --color-surface: var(--palette-grey-000);
  --color-surface-raised: var(--palette-grey-059);
  --color-surface-overlay: var(--palette-grey-089);
  --color-text-1: var(--palette-grey-794);
  --color-text-2: var(--palette-grey-664);
  --color-text-3: var(--palette-grey-497);
  --color-text-4: var(--palette-grey-337);
  --color-rule: var(--palette-grey-100);
  --color-rule-strong: var(--palette-grey-387);
  --color-rule-control: var(--palette-grey-387);
  --color-focus: var(--palette-amber-508);
  --color-accent: var(--palette-amber-182);
  --color-accent-hover: var(--palette-amber-145);
  --color-accent-ink: var(--palette-amber-799);
  --color-accent-text: var(--palette-amber-508);
  --color-danger: var(--palette-red-499);
  --color-danger-ink: var(--palette-red-499);
  --color-success: var(--palette-green-468);
  --color-success-ink: var(--palette-green-517);
  --color-warn: var(--palette-yellow-476);
  --color-warn-ink: var(--palette-yellow-523);
  --color-info-bg: var(--palette-blue-747);
  --color-info-ink: var(--palette-grey-049);
  --color-scrim: color-mix(in srgb, var(--color-text-1) 40%, transparent);
}