/* Токены дизайн-системы: единственная общая зависимость витрины и админки.
 *
 * Правило, нарушение которого превращает смену бренда в редизайн (§9 дизайн-системы):
 * ни одного зашитого цвета, размера, радиуса и тайминга в разметке — только переменные.
 *
 * Тема одна, светлая, переключателя нет (решено 07.08.2026). Цена второй темы —
 * не второй набор цветов, а каждый компонент, проверенный дважды; эти часы уходят
 * в качество единственной.
 *
 * Здесь ~25 значений: тот объём, который держится в голове целиком.
 */

:root {
  /* ── Нейтральная шкала ────────────────────────────────────────────────────
   * Чистый белый фон и чистый чёрный текст не используются намеренно: на #fff/#000
   * держится ровно тот вид, который считают дешёвым, и глаз устаёт быстрее.
   * Оттенок холодный — он нейтрален и не выдаёт «непридуманный» бренд. */
  --n-0: #fbfcfd;   /* фон страницы */
  --n-1: #f3f5f8;   /* фон блока */
  --n-2: #e7eaf0;   /* фон нажатого, разделитель поверхностью */
  --n-3: #d3d8e2;   /* контур поля */
  --n-6: #6b7688;   /* вторичный текст */
  --n-9: #2c3442;   /* текст на фоне блока */
  --n-11: #161c26;  /* основной текст, не #000 */

  /* ── Акцент ───────────────────────────────────────────────────────────────
   * Применяется ТОЛЬКО к интерактивному: не к заголовкам, не к иконкам, не к фону.
   * Тогда кнопка находится глазом за долю секунды без красного цвета и без капса.
   * Бренда нет (§12.4) — шкала нейтральная по построению и меняется этим файлом. */
  --a-strong: #1f5fd8;
  --a-hover: #1a52bd;
  --a-press: #16459f;
  --a-soft: #e8f0fe;   /* фон акцентного блока */
  --a-ring: #7ea6f0;   /* кольцо фокуса, ≥3:1 к своему фону */

  /* ── Семантика: по одной паре «фон + текст» ──────────────────────────────
   * Цвет никогда не единственный носитель смысла: рядом с ним подпись или форма. */
  --ok-bg: #e6f6ec;      --ok-fg: #10643a;
  --warn-bg: #fdf2dc;    --warn-fg: #7a5210;
  --err-bg: #fdeaea;     --err-fg: #a11a1a;

  /* ── Типографика ─────────────────────────────────────────────────────────
   * Шкала: 12 · 14 · 16 · 18 · 22 · 28 · 36 · 48, между ступенями не вклиниваться.
   *
   * Шрифт пока системный. Переменный гротеск self-hosted (§1 дизайн-системы)
   * подставляется одним файлом вместе с брендом: заводить сейчас бинарный ассет,
   * который заведомо сменится, значит платить за него дважды. Системный стек
   * при этом не стоит ни килобайта и не ходит на чужой домен (§12.2). */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-22: 1.375rem;
  --t-28: 1.75rem;
  --t-36: 2.25rem;

  /* ── Ритм и форма: сетка 4px, не больше пяти радиусов ────────────────────*/
  --s-4: 4px;   --s-8: 8px;   --s-12: 12px;  --s-16: 16px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px;  --s-64: 64px;

  --r-8: 8px;     /* мелкое */
  --r-12: 12px;   /* поля, кнопки */
  --r-16: 16px;   /* карточки */
  --r-24: 24px;   /* модальные слои */
  --r-full: 999px;

  /* ── Тени: показывают высоту слоя и больше ничего ────────────────────────
   * Нейтрально-холодные и полупрозрачные, не серые: серая тень читается как грязь. */
  --sh-1: 0 1px 2px rgba(22, 28, 38, 0.06);
  --sh-2: 0 2px 8px rgba(22, 28, 38, 0.08);
  --sh-3: 0 8px 24px rgba(22, 28, 38, 0.10);

  /* ── Движение: один набор таймингов на весь продукт ──────────────────────*/
  --d-micro: 140ms;    /* наведение, нажатие, поворот шеврона */
  --d-element: 220ms;  /* появление карточки, строки, тоста */
  --d-page: 320ms;     /* переход между экранами */
  --e-in: cubic-bezier(0.2, 0, 0, 1);
  --e-out: cubic-bezier(0.4, 0, 1, 1);

  /* Ширина колонки: длина строки текста ≤ 70 символов. */
  --measure: 64ch;
  --page: 960px;
}

/* «Переходов нет, состояния меняются мгновенно» — не «то же самое, но медленнее».
 * Проверяется на каждом экране, как и контраст (§5, §11). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 0ms;
    --d-element: 0ms;
    --d-page: 0ms;
  }
}