/* ──────────────────────────────────────────────────────────────────────────
   tokens.css — ДИЗАЙН-ТОКЕНЫ (единый «пульт» для цветов интерфейса).

   Фаза 0 рефакторинга стилей. Этот файл ПОКА чисто аддитивный:
   он только ОБЪЯВЛЯЕТ переменные, ничего ими не перекрашивая. Визуально
   приложение не меняется. Дальше (Фаза 2) захардкоженные hex в JS/HTML
   постепенно заменяются на var(--…), и тогда менять тему можно в одном месте.

   Значения подобраны под самые частые цвета, найденные аудитом
   (например #2c2c2c — 102 раза, #1e1e1e — 64, #3b82f6 — 25 и т.д.).
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Бренд / акценты */
  --c-brand:        #3b82f6;   /* основной синий (кнопки, ссылки) */
  --c-brand-strong: #2563eb;   /* насыщенный синий (hover/active) */
  --c-indigo:       #6366f1;   /* индиго (плашка периода и т.п.) */
  --c-success:      #10b981;   /* зелёный (верно/выполнено) */
  --c-success-soft: #34d399;
  --c-danger:       #ef4444;   /* красный (ошибка/неверно) */
  --c-danger-soft:  #f43f5e;   /* розово-красный */
  --c-warn:         #f59e0b;   /* янтарный (предупреждение/акцент) */
  --c-warn-strong:  #ca8a04;
  --c-accent:       #fde047;   /* жёлтый акцент */
  --c-purple:       #8b5cf6;   /* фиолетовый (задание №5) */

  /* Поверхности */
  --c-bg:           #f7f7f8;   /* фон страницы */
  --c-card:         #ffffff;   /* фон карточек */
  --c-card-2:       #f1f5f9;   /* вторичная поверхность */
  --c-border:       #e5e7eb;   /* рамки */
  --c-border-2:     #d1d5db;   /* рамки инпутов/чипов (сильнее) */
  --c-border-soft:  rgba(128,128,128,0.18);
  /* Затемнение под диалогом. В разметке живут bg-black/60, /70 и /80 — три
     разные «глубины» без причины. Новое пишем через токен. */
  --c-scrim:        rgba(15,23,42,.52);

  /* Текст */
  --c-text:         #111827;   /* основной текст */
  --c-text-soft:    #374151;
  --c-muted:        #9ca3af;   /* приглушённый текст */
  --c-muted-2:      #6b7280;
  --c-muted-3:      #94a3b8;

  /* Тени / радиусы (про запас, для будущей унификации) */
  --radius-card:    1rem;
  --radius-pill:    999px;

  /* ══ СИСТЕМА · Фаза 2 (июль 2026) ═══════════════════════════════════════
     Ниже — ЗАКРЫТЫЕ перечни. Если значения нет в этом списке, его нельзя
     писать в разметке: tools-and-docs/design-lint.js валит сборку.
     Аудит 25.07.2026 нашёл в одном лобби 7 радиусов, 15 теней и 13 размеров
     шрифта — ровно потому, что перечни были открытыми. Не открывать снова. */

  /* Радиусы — ровно три */
  --r-sm:   8px;     /* чипы, бейджи, поля ввода */
  --r-md:   14px;    /* карточки, панели, модалки */
  --r-full: 999px;   /* пилюли, аватар */

  /* Тени — ровно три. Глубина кодирует смысл, а не украшает */
  --e-1: 0 1px 2px rgba(20,20,35,.06);    /* лежит на фоне */
  --e-2: 0 4px 14px rgba(20,20,35,.10);   /* поднято пальцем / ховер */
  --e-3: 0 12px 34px rgba(20,20,35,.16);  /* перекрывает экран */

  /* Шрифт — шесть ступеней. 9px и 10px запрещены: нечитаемо на телефоне */
  --t-display: 24px; --t-display-w: 800;  /* счёт в финале режима */
  --t-title:   17px; --t-title-w:   750;  /* название карточки, заголовок модалки */
  --t-body:    15px; --t-body-w:    450;  /* текст задания */
  --t-label:   13px; --t-label-w:   650;  /* чипы, кнопки, вкладки */
  --t-caption: 12px; --t-caption-w: 500;  /* подписи под карточками */
  --t-micro:   11px; --t-micro-w:   700;  /* надзаголовки в разрядку, счётчики */

  /* Палец — условие приёмки, а не пожелание (Apple 44, Google 48) */
  --tap-min: 44px;
  --gap-tap: 8px;

  /* Цифры статов в шапке. Раньше их красили глобальные правила #stat-* из
     theme-aurora.css: сами правила были «неоновыми», но брали var(--a-b*),
     а классика переопределяла эти переменные на насыщенные — потому текст и
     читался. Аврора удалена, значения переехали сюда явно. Своя группа токенов,
     а не мод-акценты: это семантика шапки, а не режимов. */
  --c-stat-learned: #2563eb;
  --c-stat-solved:  #7c3aed;
  --c-stat-days:    #e11d48;

  /* Зелёный для ТЕКСТА. --c-success (#10b981) годится для заливок и полос, но
     как текст на светлом даёт контраст 2.5:1 — нечитаемо. Отдельный тон. */
  --c-success-text: #047857;

  /* Акценты режимов. Тон закреплён за режимом навсегда и появляется ровно
     в трёх местах: подложка иконки (14% альфы), полоса прогресса, рамка
     активного состояния. Заливка всей карточки цветом — только у главной кнопки. */
  --a-task1:  #06b6d4;   --a-task3:  #10b981;   --a-task4:  #3b82f6;
  --a-task5:  #8b5cf6;   --a-task7:  #f59e0b;   --a-solve:  #ef4444;
  --a-swipe:  #ec4899;   --a-match:  #a855f7;   --a-cram:   #f59e0b;
  --a-vov:    #84cc16;   --a-cards:  #10b981;   --a-story:  #6366f1;
  --a-visual: #0ea5e9;   --a-duel:   #f43f5e;   --a-exam:   #6366f1;
  --a-arch:   #0ea5e9;   --a-pencil: #dc2626;
}

/* Тёмная тема — переопределяем ТОЛЬКО токены (стратегия darkMode: class на <html>). */
.dark {
  --c-bg:           #121212;
  --c-card:         #1e1e1e;
  --c-card-2:       #181818;
  --c-border:       #2c2c2c;
  --c-border-2:     #3f3f46;
  --c-border-soft:  rgba(255,255,255,0.10);
  --c-scrim:        rgba(0,0,0,.62);

  --c-text:         #e5e7eb;
  --c-text-soft:    #d1d5db;
  --c-muted:        #94a3b8;
  --c-muted-2:      #9ca3af;
  --c-muted-3:      #64748b;

  /* На тёмном фоне тёмно-зелёный не виден — зеркалим в светлую сторону. */
  --c-success-text: #34d399;

  /* Тени в тёмной теме: на чёрном фоне полупрозрачный чёрный не читается,
     поэтому те же три ступени, но заметно плотнее. */
  --e-1: 0 1px 2px rgba(0,0,0,.40);
  --e-2: 0 4px 14px rgba(0,0,0,.50);
  --e-3: 0 12px 34px rgba(0,0,0,.60);
}