/* ─────────────────────────────────────────────────────────────────────────
   Токены нового дизайна (?ui=v2) — ЕДИНСТВЕННОЕ место, где задаются цвета,
   шрифты, радиусы и тени. Компоненты (components_v2.css), разметка и JS
   используют только var(--…). См. docs/REDESIGN_PLAN.md, раздел «Принципы».
   Светлая тема — :root, тёмная — [data-theme="dark"] (ставит theme_v2.js).
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@600;700;800;900&display=swap");

:root {
  color-scheme: light;

  /* Шрифты */
  --font-display: 'Lilita One', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Форма */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --border-w: 3px;
  --press: 0 6px 0 var(--shadow);
  --press-sm: 0 3px 0 var(--shadow);

  /* Поверхности */
  --bg: #d6ecff;
  --hero: #1b5fc9;
  --hero-stripe: #f5b60f;
  --hero-text: #ffffff;
  --hero-sub: #d6e8ff;
  --hero-btn-border: rgba(255, 255, 255, 0.55);
  --hero-btn-hover: rgba(255, 255, 255, 0.12);
  --panel: #ffffff;
  --panel-head: #eaf3ff;
  --surface-2: #f3f8ff;
  --hover: #eef4ff;
  --overlay: rgba(5, 12, 40, 0.55);

  /* Линии */
  --outline: #10264f;
  --shadow: #10264f;
  --sep: #e3ecf8;
  --line: #c9d9f0;

  /* Текст */
  --text: #10264f;
  --muted: #4a5d80;
  --heading: #1b5fc9;
  --link: #1b5fc9;

  /* Поля ввода */
  --input-bg: #eef5ff;
  --input-border: #9cc2f0;
  --focus: #f5b60f;

  /* Акценты */
  --gold: #ffd23f;
  --gold-shadow: #c88400;
  --gold-ink: #3a2400;
  --primary: #1b5fc9;
  --primary-shadow: #0d3d8a;
  --on-primary: #ffffff;
  --elixir: #9b2fd6;
  --evo: #c43bf0;
  --evo-glow: rgba(196, 59, 240, 0.55);
  --champion: #f5b60f;
  --champion-glow: rgba(245, 182, 15, 0.55);
  --champion-bg: #fff3c4;
  --evo-bg: #f5e3fb;

  /* Результаты и статусы (плашки с белым текстом) */
  --win: #1f8a2c;
  --loss: #c42f2a;
  --draw: #5f6d88;
  --on-status: #ffffff;

  /* Статусы текстом / мягкие подложки */
  --good-text: #1a7a3f;
  --good-bg: #e3f6e6;
  --bad-text: #b4231e;
  --bad-bg: #ffe9e7;
  --warn-text: #a14a00;
  --warn-bg: #fff3dc;
  --info-text: #1b4fb0;
  --info-bg: #e6efff;
  --loss-bar: #e0453f;
  --loss-track: #ffe1df;

  /* Вкладки */
  --tab-idle: #10264f;
  --tab-off-bg: #eef2f8;
  --tab-off-text: #5d6e8e;

  /* Матрица матчапов */
  --mm-bad: #dc3232;
  --mm-good: #28a050;

  /* График винрейта (Chart.js читает эти значения через getComputedStyle) */
  --chart-line: #1f8a2c;
  --chart-bar: rgba(16, 38, 79, 0.10);
  --chart-grid: rgba(16, 38, 79, 0.10);
  --chart-tick: #4a5d80;
  --chart-deck-line: rgba(27, 95, 201, 0.6);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c1228;
  --hero: #16205a;
  --hero-sub: #b9c6f0;
  --panel: #151d40;
  --panel-head: #1c2752;
  --surface-2: #1a2350;
  --hover: #1f2a58;
  --overlay: rgba(2, 5, 15, 0.7);

  --outline: #050914;
  --shadow: #050914;
  --sep: #26306a;
  --line: #2e3a72;

  --text: #e8ecff;
  --muted: #a3add6;
  --heading: #f7c948;
  --link: #8fb6ff;

  --input-bg: #0c1228;
  --input-border: #3a4785;

  --primary: #3d7be0;
  --primary-shadow: #1d4396;
  --elixir: #b04cf0;
  --evo: #d06bff;
  --evo-glow: rgba(208, 107, 255, 0.6);
  --champion-bg: #3a3214;
  --evo-bg: #34204a;

  --win: #23963a;
  --loss: #d33a3a;
  --draw: #4a5687;

  --good-text: #6fe08f;
  --good-bg: #173a26;
  --bad-text: #ff8f86;
  --bad-bg: #3a1a22;
  --warn-text: #ffb44d;
  --warn-bg: #3a2a10;
  --info-text: #9cc0ff;
  --info-bg: #1f2c63;
  --loss-bar: #ff4d5e;
  --loss-track: #2a2f5e;

  --tab-idle: #c8d0f0;
  --tab-off-bg: #1c2752;
  --tab-off-text: #8590bd;

  --mm-bad: #e04848;
  --mm-good: #2fb35a;

  --chart-line: #4fd36f;
  --chart-bar: rgba(232, 236, 255, 0.12);
  --chart-grid: rgba(232, 236, 255, 0.08);
  --chart-tick: #a3add6;
  --chart-deck-line: rgba(143, 182, 255, 0.7);
}