/* W1.1' per-page split of tasks/trainer.css (W1_1prime_PLAN). Generated by split_css.cjs. */
/* ============================================================================
   TRAINER.CSS — STRUCTURAL LAYERS (W2.5)

   Source of truth по режимам экрана и печати. См. контракт в
   docs/navigation/print_layout_contract.md §6. Инварианты проверяются
   скриптом tools/check_trainer_css_layers.mjs.

   L0  BASE / RESET / SHARED UTILITIES ............... line 26
   L1  SCREEN / TRAINER UI — PART A .................. line 182
   L2  SCREEN / CARDS ................................ line 965
   L3  SCREEN / TRAINER UI — PART B .................. line 1437
   L4  PRINT / LEGACY @MEDIA PRINT ................... line 3509  (внутри @media print)
   L5  PRINT / STATE-GATED ........................... line 3677  (внутри @media print)

   Правила поддержки:
   - screen-правила НЕ используют body.print-layout-active.
   - print-правила идут через @media print { ... }; внутри него
     L4 (legacy) и L5 (state-gated) разделены инвариантами по селекторам.
   - при добавлении нового правила — кладём его в существующий layer
     или заводим новый (обновив ToC, layer-маркер и governance-скрипт
     tools/check_trainer_css_layers.mjs).
   ============================================================================ */


/* ============================================================================
   L0 · BASE & RESET & SHARED UTILITIES
   Инварианты:
   - CSS-variables :root + themes, глобальные утилиты (*, body, .container,
     .panel, button, input, a), не связанные с конкретной page/feature.
   - Не используют body.print-layout-active.
   - Не вложены в @media print.
   ============================================================================ */

:root{
  /* базовые значения (по умолчанию теперь СВЕТЛАЯ тема) */
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#e5e7eb;
  --border:#d1d5db;
  --text:#111827;
  --text-dim:#6b7280;
  --accent:#2563eb;
  --accent-2:#1d4ed8;
  --success:#059669;
  --danger:#dc2626;
  --muted:#ffffff;
  --shadow:0 8px 20px rgba(15,23,42,.12);
  --radius:12px;
  --figure-h:300px;

  /* WD3 (премиум-редизайн главной, вариант A · светлый) — additive surface-токены.
     Эти переменные уже использовались в home-student.css через var(--surface,#f8fafc)
     с фолбэком; теперь зафиксированы как настоящие токены (значения совпадают). */
  --surface:#f8fafc;        /* slate-50  — фон контент-области (воздух) */
  --surface2:#f1f5f9;       /* slate-100 — светлый сайдбар / hover-подложки */
  --accent-light:#dbeafe;   /* blue-100  — активный пункт меню / eyebrow / аватар */
  --shadow-md:0 4px 16px rgba(15,23,42,.08);  /* мягкая тень карточек премиум-каркаса */
}


/* тёмная тема (явно) */
html[data-theme="dark"],
body[data-theme="dark"]{
  --bg:#0e1117;
  --panel:#111827;
  --panel-2:#0f1623;
  --border:#232635;
  --text:#e6e6e6;
  --text-dim:#aeb3c2;
  --accent:#3b82f6;
  --accent-2:#2563eb;
  --success:#10b981;
  --danger:#ef4444;
  --muted:#1b1d24;
  --shadow:0 8px 24px rgba(0,0,0,.25);

  /* WD3 surface-токены — dark-аналоги (тема пока скрыта в проде, держим для корректности) */
  --surface:#0b1320;
  --surface2:#0f1623;
  --accent-light:rgba(59,130,246,.16);
  --shadow-md:0 4px 16px rgba(0,0,0,.35);
}


/* светлая тема (если атрибут всё же выставлен явно) */
html[data-theme="light"],
body[data-theme="light"]{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#e5e7eb;
  --border:#d1d5db;
  --text:#111827;
  --text-dim:#6b7280;
  --accent:#2563eb;
  --accent-2:#1d4ed8;
  --success:#059669;
  --danger:#dc2626;
  --muted:#ffffff;
  --shadow:0 8px 20px rgba(15,23,42,.12);

  /* WD3 surface-токены (явный light-блок — паритет с :root) */
  --surface:#f8fafc;
  --surface2:#f1f5f9;
  --accent-light:#dbeafe;
  --shadow-md:0 4px 16px rgba(15,23,42,.08);
}

/* --- W1.1' proposed design tokens (additive; Claude Design source). --- */
/* Confirmed from W1.0b §4. New tokens are ADDITIVE — existing rules keep their literals;
   refactoring rules onto these is future Claude Design redesign work, not this wave. */
:root {
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px;
  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px;
  --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --dur-fast: 120ms; --dur-base: .2s;
  --focus-ring: rgba(59,130,246,.35);
}