/* Токены оформления. Направление — «крафт-бумага»: цвета сняты с фотографий
   подачи (крафт-стакан, белая керамика, гранитная столешница).

   Правило именования семантических цветов — четвёрка на каждую роль:
     --x        основной тон роли: заливки, обводки, иконки, кольца;
     --x-text   затемнённый вариант ДЛЯ ТЕКСТА на бумаге (контраст ≥ 4.5:1);
     --on-x     цвет текста ПОВЕРХ заливки --x (контраст ≥ 4.5:1);
     --x-soft   бледная подложка той же роли (плашки, подсветка строки).
   Экран никогда не подбирает оттенок сам: текст акцентом — --accent-text,
   кнопка акцентом — фон --accent и текст --on-accent.

   Контраст проверен по WCAG AA (числа в комментариях — на фоне страницы).  */

:root {
  color-scheme: light;

  /* --- Бумага ------------------------------------------------------- */
  --bg: #F5F0E8;            /* фон страницы */
  --surface: #FFFCF7;       /* карточка, лист бумаги */
  --surface-sunken: #EDE6DA;/* нижняя панель, углубления: бумага в тени */
  --hairline: rgba(42, 30, 22, 0.12);
  --hairline-strong: rgba(42, 30, 22, 0.22);

  /* --- Текст -------------------------------------------------------- */
  --text: #2A1E16;          /* 14.3:1 */
  /* Спецификация называет второстепенным текстом #7D7871, но на бумаге это
     3.9:1 — ниже AA для 17px. Затемнено до тёплого серого; исходный тон
     остался в --ink-quiet для нетекстовых штрихов.
     Аудит задачи 14 (headless-прогон всех экранов) нашёл, что на фоне
     нижней панели (--surface-sunken, он темнее --bg) 13px-подпись вкладки
     (.tab__label, цвет — этот токен) даёт только 4.4:1 — ниже AA для
     обычного текста. Токен один на все экраны, а самый тёмный фон под
     ним — как раз --surface-sunken, поэтому цвет подобран по нему:
     5.4:1 на --bg, 4.9:1 на --surface-sunken — оба ≥ 4.5:1. */
  --text-2: #676158;        /* 4.9:1 на --surface-sunken, 5.4:1 на --bg */
  --ink-quiet: #7D7871;     /* иконки, разделители, отключённые элементы */

  /* --- Акцент (крафт) ----------------------------------------------- */
  --accent: #B8875A;
  --accent-text: #8A5A2B;   /* 5.2:1 */
  --on-accent: #2A1E16;     /* 5.1:1 поверх --accent */
  --accent-soft: #F0E4D6;

  /* --- Верно (матча) ------------------------------------------------ */
  /* Только тройка --ok/--ok-text/--ok-soft: ok красит только обводки/
     иконки/кольца (--ok) и мягкие плашки-строки (--ok-soft + --ok-text,
     см. .chip--ok в components.css) — заливки на весь элемент с текстом
     ПОВЕРХ нет нигде, поэтому --on-ok не заводим (финальное ревью, minor:
     токен лежал неиспользуемым). Появится настоящая заливка — токен
     возвращается по тому же правилу именования, что и --on-accent выше. */
  --ok: #5F7A3C;
  --ok-text: #4E6630;       /* 5.7:1 */
  --ok-soft: #E7ECDC;

  /* --- Ошибка (облепиха) -------------------------------------------- */
  /* Та же причина, что и у --ok выше: --err-fill/--on-err не потребляются
     ни одним компонентом (.chip--err красит --err-soft/--err-text, не
     сплошную заливку) — удалены как мёртвый код финального ревью. */
  --err: #C05A2E;           /* тон спецификации: обводка, кольцо, иконка */
  --err-text: #A64A26;      /* 5.1:1 */
  --err-soft: #F7E3D9;

  /* --- Тени: тёплые, как у ценника на стойке ------------------------ */
  --shadow-1: 0 1px 2px rgba(42, 30, 22, 0.07), 0 6px 16px -8px rgba(42, 30, 22, 0.16);
  --shadow-2: 0 2px 4px rgba(42, 30, 22, 0.08), 0 16px 32px -12px rgba(42, 30, 22, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* --- Шрифты ------------------------------------------------------- */
  /* Только системные стеки: сайт должен открываться без интернета. */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", "Menlo", "Consolas",
    "Roboto Mono", "DejaVu Sans Mono", monospace;

  /* Шкала от базы 17px, шаг ≈1.2. Крупные размеры текучие: на 320px вопрос
     не должен переноситься в три строки, на 430px — выглядеть мелким. */
  --fs-xs: 0.75rem;         /* 12px — ячейка-источник, подпись */
  --fs-sm: 0.8125rem;       /* 13px — вкладки, мелкие подписи */
  --fs-md: 0.9375rem;       /* 15px — второстепенный текст */
  --fs-base: 1.0625rem;     /* 17px — база */
  --fs-lg: 1.25rem;         /* 20px — заголовок карточки */
  --fs-xl: 1.5rem;          /* 24px — заголовок экрана */
  --fs-question: clamp(1.625rem, 1.05rem + 2.9vw, 2rem);  /* 26→32px */
  --fs-answer: clamp(2rem, 1.1rem + 4.5vw, 2.75rem);      /* 32→44px */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* --- Размеры и ритм ----------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  --radius: 16px;           /* карточки, кнопки */
  --radius-sm: 10px;        /* плашки, поля, мелкие элементы */
  --radius-pill: 999px;

  --gutter: 1rem;           /* поля страницы, живут от 320px */
  --content-max: 34rem;     /* 544px: длина строки < 80 знаков */
  --tap: 56px;              /* минимальная высота кнопки (требование) */
  --nav-h: 60px;            /* высота нижней панели без безопасной зоны */

  /* --- Движение: всё короче 200 мс ---------------------------------- */
  --dur-fast: 120ms;
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #171009;
    --surface: #211710;
    --surface-sunken: #1C130C;
    --hairline: rgba(242, 233, 223, 0.12);
    --hairline-strong: rgba(242, 233, 223, 0.24);

    --text: #F2E9DF;        /* 15.7:1 */
    --text-2: #A99E92;      /* 7.2:1 */
    --ink-quiet: #8C8175;

    /* Те же тона, приглушённые: на тёмном они светлеют, иначе не читаются. */
    --accent: #C9A277;      /* 8.0:1 — годится и как текст */
    --accent-text: #C9A277;
    --on-accent: #171009;
    --accent-soft: #33251A;

    --ok: #8FA968;          /* 7.2:1 */
    --ok-text: #96B06E;
    --ok-soft: #232B1B;

    --err: #E0865B;         /* 6.9:1 */
    --err-text: #E39270;
    --err-soft: #33211A;

    /* На тёмном тень не читается — вес поверхности держит светлая грань. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 16px 32px -12px rgba(0, 0, 0, 0.7);
    --shadow-inset: inset 0 1px 0 rgba(242, 233, 223, 0.06);
  }
}