/*
 * ЕДИНСТВЕННЫЙ ИСТОЧНИК ПРАВДЫ О ЦВЕТЕ, РАЗМЕРЕ И РИТМЕ (§10.3 хендоффа).
 *
 * Устройство:
 *   - ОДНА нейтральная шкала --n-0 … --n-950 на всё приложение. Иначе панели
 *     собираются из пяти похожих-но-разных оттенков, и это видно.
 *   - РОВНО ОДИН акцент. Второй акцент превращает интерфейс в новогоднюю ёлку
 *     и размывает выделение того, что действительно важно.
 *   - Семантические роли. Компоненты обращаются ТОЛЬКО к ним, никогда к шкале
 *     напрямую — иначе тёмная тема потребовала бы править каждый компонент.
 *
 * Тёмные правила живут ПАРОЙ: селектор по атрибуту и копия внутри
 * @media (prefers-color-scheme: dark) с :not([data-theme='light']).
 * Первое — явный выбор человека, второе — системная настройка. Правило только с
 * атрибутом ничего не делает у того, у кого тёмная система, а таких большинство.
 * Парность стережёт tools/guards/theme-pairs.js.
 */

:root {
  /* --------------------------------------------------------- нейтральная шкала */
  --n-0: #ffffff;
  --n-50: #f7f8fa;
  --n-100: #eef0f4;
  --n-200: #dfe3ea;
  --n-300: #c7ccd6;
  --n-400: #9aa2b1;
  --n-500: #6f7889;
  --n-600: #525b6b;
  --n-700: #3c4453;
  --n-800: #2a3140;
  --n-900: #1b2130;
  --n-950: #11161f;

  /* ----------------------------------------------------------------- акцент */
  /* Зелёный взят потому, что это цвет самого WhatsApp: панель управления
     номерами WhatsApp, покрашенная в синий, читается как чужая. */
  --accent-50: #e8f7ef;
  --accent-100: #c9ecd9;
  --accent-300: #6fcf9a;
  --accent-500: #12a05a;
  --accent-600: #0e8449;
  --accent-700: #0b6a3b;

  /* --------------------------------------------------------- тональные шкалы */
  --danger-100: #fde4e4;
  --danger-500: #d3383c;
  --danger-700: #9d2427;

  --warn-100: #fdf0d6;
  --warn-500: #c98a12;
  --warn-700: #8f610b;

  --ok-100: #dff3e6;
  --ok-500: #1d9d55;
  --ok-700: #14713d;

  --info-100: #dfeaf9;
  --info-500: #2b6cb0;
  --info-700: #1e4e80;

  /*
   * ЧЕРНИЛА. Их ДВА семейства, и различие между ними — главный урок §10.3:
   * токен, вычисленный для одного фона, НЕ является токеном для другого.
   *   --*-ink          — текст на чипе собственного тона (--*-100);
   *   --*-ink-surface  — тонированный текст на обычной поверхности.
   * Числа контраста в комментариях проверяются tools/selftest-contrast.mjs
   * по формуле WCAG: если они разойдутся с правдой, проверка краснеет.
   */
  --danger-ink: #7e1b1e; /* на --danger-100: 8.06:1 */
  --warn-ink: #6d4a08; /* на --warn-100: 6.87:1 */
  --ok-ink: #0f5a30; /* на --ok-100: 6.86:1 */
  --info-ink: #1a4370; /* на --info-100: 8.03:1 */

  --danger-ink-surface: #a92a2d; /* на --bg-hover: 4.61:1 */
  --warn-ink-surface: #7a5309; /* на --bg-hover: 4.84:1 */
  --ok-ink-surface: #106237; /* на --bg-hover: 5.62:1 */
  --info-ink-surface: #1f5590; /* на --bg-hover: 5.06:1 */

  /* ------------------------------------------------------ семантические роли */
  /* Компоненты используют ТОЛЬКО их, никогда сырую шкалу — иначе тёмная тема
     потребовала бы трогать каждый компонент. */
  --bg-body: var(--n-50);
  --bg-surface: var(--n-0);
  --bg-sunken: var(--n-100);
  --bg-hover: var(--n-100);
  --bg-active: var(--n-200);
  --bg-inverse: var(--n-900);

  --text-strong: var(--n-900);
  --text: var(--n-800);
  --text-muted: var(--n-500);
  --text-inverse: var(--n-0);
  --text-accent: var(--accent-700);

  --border-subtle: var(--n-200);
  --border: var(--n-300);
  --border-strong: var(--n-400);
  --border-focus: var(--accent-500);

  --shadow-sm: 0 1px 2px rgba(17, 22, 31, 0.08);
  --shadow-md: 0 4px 16px rgba(17, 22, 31, 0.12);
  --shadow-lg: 0 12px 40px rgba(17, 22, 31, 0.18);

  /* ------------------------------------------------------------------ ритм */
  /* Шаг 4 px и только он. Всё остальное производно, чтобы ритм не расползался. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

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

  /* ---------------------------------------------------------------- шрифты */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-2xl: 24px;

  --lh-tight: 1.25;
  --lh-normal: 1.45;

  /* ---------------------------------------------------------------- размеры */
  --header-h: 48px;
  --row-h: 34px;
  --control-h: 30px;
  --control-h-sm: 26px;
}

/* ⚠️ ТЁМНАЯ ТЕМА ЗАДАНА ДВАЖДЫ, И ЭТО НЕ ДУБЛИРОВАНИЕ РАДИ ДУБЛИРОВАНИЯ:
   первый блок — явный выбор человека, второй — системная настройка. Половины
   обязаны объявлять ОДНО И ТО ЖЕ; расхождение ловит guard theme-pairs, потому
   что иначе результат зависит от того, КАК пришли к тёмной. */
:root[data-theme='dark'] {
  --bg-body: var(--n-950);
  --bg-surface: var(--n-900);
  --bg-sunken: var(--n-950);
  --bg-hover: var(--n-800);
  --bg-active: var(--n-700);
  --bg-inverse: var(--n-100);

  --text-strong: var(--n-50);
  --text: var(--n-200);
  --text-muted: var(--n-400);
  --text-inverse: var(--n-950);
  --text-accent: var(--accent-300);

  --border-subtle: var(--n-800);
  --border: var(--n-700);
  --border-strong: var(--n-600);
  --border-focus: var(--accent-300);

  --danger-100: #3a1a1c;
  --warn-100: #3a2c10;
  --ok-100: #14331f;
  --info-100: #16283d;

  --danger-ink: #ffb3b5; /* на тёмном --danger-100: 7.94:1 */
  --warn-ink: #f3cd7c; /* на тёмном --warn-100: 8.11:1 */
  --ok-ink: #7fd8a3; /* на тёмном --ok-100: 8.02:1 */
  --info-ink: #a8cdf5; /* на тёмном --info-100: 8.10:1 */

  --danger-ink-surface: #f08b8e; /* на тёмном --bg-hover: 5.15:1 */
  --warn-ink-surface: #e0b25a; /* на тёмном --bg-hover: 5.41:1 */
  --ok-ink-surface: #5fc98a; /* на тёмном --bg-hover: 5.35:1 */
  --info-ink-surface: #83b6ee; /* на тёмном --bg-hover: 5.30:1 */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  /* :not([data-theme='light']) — то, что оставляет ЯВНЫЙ светлый выбор
     победителем над тёмной системой. Без него человек, выбравший светлую тему,
     получал бы тёмную на тёмной системе, и переключатель выглядел бы сломанным. */
  :root:not([data-theme='light']) {
    --bg-body: var(--n-950);
    --bg-surface: var(--n-900);
    --bg-sunken: var(--n-950);
    --bg-hover: var(--n-800);
    --bg-active: var(--n-700);
    --bg-inverse: var(--n-100);

    --text-strong: var(--n-50);
    --text: var(--n-200);
    --text-muted: var(--n-400);
    --text-inverse: var(--n-950);
    --text-accent: var(--accent-300);

    --border-subtle: var(--n-800);
    --border: var(--n-700);
    --border-strong: var(--n-600);
    --border-focus: var(--accent-300);

    --danger-100: #3a1a1c;
    --warn-100: #3a2c10;
    --ok-100: #14331f;
    --info-100: #16283d;

    --danger-ink: #ffb3b5;
    --warn-ink: #f3cd7c;
    --ok-ink: #7fd8a3;
    --info-ink: #a8cdf5;

    --danger-ink-surface: #f08b8e;
    --warn-ink-surface: #e0b25a;
    --ok-ink-surface: #5fc98a;
    --info-ink-surface: #83b6ee;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  }
}