/* ============================================================
   tokens.css - дизайн-токени white-label системи (D-UI-01, Фаза 1)
   Кодування файлу: Windows-1251.
   Три рівні токенів:
     1) БРЕНДОВІ  - перекриваються замовником через config.php
        (ui_head.php генерує інлайн :root{...} поверх цих дефолтів)
     2) СЕМАНТИЧНІ - кольори ігрового контенту (успіх/помилка/підказка/інфо).
        ФІКСОВАНІ: бренд їх НІКОЛИ не перекриває.
     3) НЕЙТРАЛЬНІ/ПОВЕРХНІ - керуються темою light/dark.
   ============================================================ */

:root{
  /* --- 1. БРЕНД (перекривається замовником через config.php) --- */
  --brand:        #2D6CDF;   /* основний акцент: кнопки, посилання, прогрес */
  --brand-2:      #2D6CDF;   /* вторинний (градієнт лого-марки), опційний   */
  --brand-strong: #1E4FB0;   /* затемнений - текст/посилання на світлому    */
  --brand-ink:    #FFFFFF;   /* текст/іконка НА брендовому кольорі (авто)   */
  --brand-soft:   rgba(45,108,223,.22);  /* фокус-кільце, підсвітки        */
  --brand-soft-bg:rgba(45,108,223,.12);  /* м'який фон (медаль на фініші)  */

  /* --- 2. СЕМАНТИЧНІ: ІГРОВИЙ КОНТЕНТ (бренд НЕ перекриває) --- */
  --success:#127A3E; --success-bg:#E7F6EC;   /* правильний код   */
  --danger:#C0392B;  --danger-bg:#FBEAE8;    /* невірний код     */
  --warning:#8A5A00; --warning-bg:#FFF3DC;   /* підказка / штраф */
  --warning-border:rgba(138,90,0,.34);
  --info:#2A4B6B;    --info-bg:#EAF1F8;      /* нейтральні нотатки, повтор */

  /* --- 3. НЕЙТРАЛЬНІ / ПОВЕРХНІ (керує тема) --- */
  --bg:#F5F7FA; --surface:#FFFFFF; --surface-2:#EEF1F5;
  --text:#131A22; --text-muted:#5C6773; --border:#E2E6EC;
  --shadow:0 1px 3px rgba(18,26,36,.10);
  --scrim:rgba(245,247,250,.82);   /* скрим над фоном-патерном ($bg_overlay) */
  --pat:rgba(19,26,34,.06);        /* службові відтінки патерна */

  /* --- ТИПОГРАФІКА / РИТМ / РУХ --- */
  --font:"GothamPro","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --radius:12px; --radius-lg:18px; --tap:44px;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:32px;
  --transition:.18s ease;
}

/* ---------- Темна тема ($theme=dark) ---------- */
[data-theme="dark"]{
  --bg:#0E1218; --surface:#171C24; --surface-2:#1F2630;
  --text:#EAEEF3; --text-muted:#98A3B0; --border:#2A313C;
  --shadow:0 1px 3px rgba(0,0,0,.55);
  --scrim:rgba(14,18,24,.80);
  --pat:rgba(255,255,255,.05);
  /* семантичні лишаються насиченими й контрастними на темному
     (світліші варіанти тих самих ролей; бренд їх так само не чіпає) */
  --success:#4BD07E; --success-bg:#12271B;
  --danger:#F0736A;  --danger-bg:#2A1512;
  --warning:#F0B24B; --warning-bg:#2A2110;
  --warning-border:rgba(240,178,75,.40);
  --info:#8FB4DE;    --info-bg:#132030;
}

/* ---------- $theme=auto: слухаємо пристрій ---------- */
@media (prefers-color-scheme: dark){
  [data-theme="auto"]{
    --bg:#0E1218; --surface:#171C24; --surface-2:#1F2630;
    --text:#EAEEF3; --text-muted:#98A3B0; --border:#2A313C;
    --shadow:0 1px 3px rgba(0,0,0,.55);
    --scrim:rgba(14,18,24,.80);
    --pat:rgba(255,255,255,.05);
    --success:#4BD07E; --success-bg:#12271B;
    --danger:#F0736A;  --danger-bg:#2A1512;
    --warning:#F0B24B; --warning-bg:#2A2110;
    --warning-border:rgba(240,178,75,.40);
    --info:#8FB4DE;    --info-bg:#132030;
  }
}

/* ---------- Доступність: вимкнення руху ---------- */
@media (prefers-reduced-motion: reduce){
  :root{--transition:0s}
}