/* ============================================================================
   tokens.css — ЕДИНЫЙ ИСТОЧНИК значений дизайн-системы book-eng (user-сторона).
   Меняешь значение здесь — меняется ВЕЗДЕ, где оно используется.
   Характер: «Дружелюбный синий, мягкий» (выбор PO 04.06.2026).
   Механизм — нативные CSS-переменные (без сборщиков; «работает 10 лет»).
   ============================================================================ */

:root {
  color-scheme: light;

  /* ---- ЦВЕТА -------------------------------------------------------------- */
  --color-primary:        #2563EB;   /* основной (кнопки подтверждения, акценты) */
  --color-primary-hover:  #1D4ED8;   /* наведение/нажатие */
  --color-primary-soft:   #DBEAFE;   /* мягкая подложка (выделение, чипы) */
  --color-on-primary:     #FFFFFF;   /* текст на синем */

  --color-learned:        #16A34A;   /* «слово выучено» (зелёный) */
  --color-learned-soft:   #DCFCE7;

  /* Цвета разделов главного экрана (кнопки-пилюли) */
  --color-course:         #2F86E0;   /* Курс — синий */
  --color-course-soft:    #E8F2FD;
  --color-course-border:  #BBD9F6;
  --color-books:          #F2922E;   /* Аудиокниги — оранжевый */
  --color-books-soft:     #FCEFE1;
  --color-books-border:   #F6C79A;
  --color-words:          #15A06B;   /* Словарь — зелёный */
  --color-words-soft:     #E6F6EF;
  --color-words-border:   #A7DCC6;

  --color-bg:             #F8FAFC;   /* фон страницы */
  --color-surface:        #FFFFFF;   /* карточки, модалки */
  --color-surface-alt:    #F1F5F9;   /* вторичная поверхность */

  --color-text:           #0F172A;   /* основной текст */
  --color-text-muted:     #64748B;   /* второстепенный текст */
  --color-text-faint:     #94A3B8;   /* подписи, плейсхолдеры */
  --color-on-dark:        #FFFFFF;   /* текст на синей панели */

  --color-border:         #D3DAE6;   /* границы полей/карточек (палитра оригинала) */
  --color-border-strong:  #CBD5E1;

  /* Палитра оригинала book-eng (фильтры, ховеры, акцент) — из 01_original/styles/site.css */
  --color-hover:          #E6EDF5;   /* фон при наведении (фильтр/строка списка) */
  --color-accent:         #60ABE4;   /* акцент: активный фильтр, рамка фокуса */
  --color-accent-ink:     #254A74;   /* синий текст (активный фильтр, заголовки) */
  --color-active:         #F5F7FA;   /* фон активного фильтра */

  --color-success:        #16A34A;
  --color-warning:        #D97706;
  --color-danger:         #DC2626;
  --color-danger-hover:   #B91C1C;
  --color-danger-soft:    #FEE2E2;

  --color-focus-ring:     rgba(37, 99, 235, 0.35);  /* кольцо фокуса (доступность) */

  /* ---- ШРИФТЫ ------------------------------------------------------------- */
  /* Системный стек — мгновенно, без загрузки, нативно на всех устройствах. */
  --font-base:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-muted:  var(--font-base);   /* второстепенный (можно заменить отдельным) */

  --text-xs:    0.75rem;    /* 12px — мелкие подписи */
  --text-sm:    0.875rem;   /* 14px — второстепенный текст */
  --text-base:  1rem;       /* 16px — базовый (важно для мобильных: не зумит iOS) */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.375rem;   /* 22px — заголовки секций */
  --text-2xl:   1.75rem;    /* 28px — крупные заголовки */

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.55;

  /* ---- ОТСТУПЫ (единая шкала, «одинаковые отступы окна») ------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ---- СКРУГЛЕНИЯ --------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;   /* базовое (кнопки, поля) */
  --radius-lg:   18px;   /* карточки, модалки */
  --radius-full: 999px;  /* пилюли, аватары */

  /* ---- ТЕНИ --------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.16);

  /* ---- РАСКЛАДКА / АДАПТИВНОСТЬ ------------------------------------------- */
  --container-max:  720px;   /* макс. ширина контента (читаемость; на ПК поле по бокам) */
  --container-pad:  var(--space-4);   /* боковые поля окна */

  --control-height: 48px;    /* высота кнопок/полей — крупно для пальца (мобайл-first) */
  --tap-min:        44px;    /* минимальная зона нажатия (доступность) */

  /* ---- ПРОЧЕЕ ------------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --z-modal:    1000;
  --z-overlay:  990;
  --z-topbar:   100;

  /* Брейкпоинты — для справки (в CSS используются как литералы в @media):
     телефон  < 640px   (база)
     планшет  >= 640px
     ПК       >= 1024px */
}

/* ============================================================================
   НОЧНАЯ ТЕМА. Переопределяем ТОЛЬКО цвета (шрифты/отступы/радиусы общие).
   Это единственное место значений тёмной темы. Тема включается атрибутом
   data-theme="dark" на <html> (ставит assets/js/theme.js: из localStorage или
   системной настройки). Компоненты не знают о теме — берут те же переменные.
   ============================================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary:        #3B82F6;   /* чуть светлее — читаемо на тёмном фоне */
  --color-primary-hover:  #60A5FA;
  --color-primary-soft:   #1E3A5F;
  --color-on-primary:     #0B1220;   /* тёмный текст на ярком синем */

  --color-learned:        #34D399;
  --color-learned-soft:   #123524;

  --color-course:         #4D9BEC;
  --color-course-soft:    #14253B;
  --color-course-border:  #2C5E92;
  --color-books:          #F2A24E;
  --color-books-soft:     #2E2415;
  --color-books-border:   #6B4A22;
  --color-words:          #2BB67E;
  --color-words-soft:     #11301F;
  --color-words-border:   #1E5E40;

  --color-bg:             #0B1220;
  --color-surface:        #111A2E;
  --color-surface-alt:    #1B2740;

  --color-text:           #E8EEF7;
  --color-text-muted:     #9FB0C7;
  --color-text-faint:     #64748B;
  --color-on-dark:        #FFFFFF;

  --color-border:         #1F2C45;
  --color-border-strong:  #334155;

  --color-hover:          #1B2740;   /* тёмные эквиваленты палитры оригинала */
  --color-accent:         #4D9BEC;
  --color-accent-ink:     #CFE0F2;
  --color-active:         #16243B;

  --color-success:        #34D399;
  --color-warning:        #FBBF24;
  --color-danger:         #F87171;
  --color-danger-hover:   #FCA5A5;
  --color-danger-soft:    #3B1D1D;

  --color-focus-ring:     rgba(96, 165, 250, 0.45);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.60);
}