/* Дизайн-токены «Сянци: Путь Мастера».
   Все цвета, шрифты, радиусы и тени — только отсюда. Тема: светлая «рисовая бумага и лак»,
   тёмная «тушь и лак». Тёмная включается системно или атрибутом data-theme="dark" (ui.js ставит его по Telegram). */

/* Google Fonts (Nunito, Noto Serif SC, Ma Shan Zheng) подключаются в <head> каждой страницы без блокировки отрисовки. */

:root {
  /* шрифты */
  --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-piece: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-brush: 'Ma Shan Zheng', 'Noto Serif SC', serif;   /* декоративные иероглифы: 楚河 漢界, заголовки */
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* масштаб */
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 19px; --fs-xl: 24px; --fs-2xl: 32px; --fs-3xl: 44px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --tap: 48px;                       /* минимальная зона нажатия — детям пальцем */
  --page-max: 560px;                 /* ширина мобильных страниц */
  --page-max-wide: 1180px;           /* кабинет тренера / админка на компьютере */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --dur: 220ms;

  /* светлая тема */
  --bg: #f6efe2;                     /* рисовая бумага */
  --bg-pattern: rgba(160,120,70,.06);
  --surface: #fffcf6;
  --surface-2: #f1e7d6;
  --surface-3: #e8dac3;
  --border: #e2d3bb;
  --ink: #2b221c;                    /* основной текст — тушь */
  --ink-2: #6e6155;                  /* вторичный */
  --ink-3: #9a8b7c;                  /* подписи */
  --on-accent: #ffffff;

  --primary: #c0392b;                /* лак */
  --primary-hover: #a93224;
  --primary-soft: #f8e1dc;
  --jade: #23865f;                   /* нефрит — успех, победа */
  --jade-soft: #d9efe4;
  --gold: #d49a2a;                   /* золото — награды, звания */
  --gold-soft: #f8ebcc;
  --sky: #2f6fb0;                    /* инфо, ничья */
  --sky-soft: #dce8f5;
  --danger: #c62828;
  --warn: #c77700;
  --warn-soft: #fbe9c9;

  /* исходы партий */
  --win: var(--jade);  --loss: var(--primary);  --draw: var(--sky);

  /* доска */
  --board-wood: #eac78e;
  --board-wood-2: #dcb070;
  --board-frame: #8a5a2b;
  --board-line: #5b3a1e;
  --board-river: #d9b77a;
  --board-river-text: #7a4e24;
  --piece-face: #fbf3e2;
  --piece-rim: #c9a56c;
  --piece-red: #b8261b;
  --piece-black: #1f1a17;
  --piece-shadow: rgba(60,30,5,.35);
  --hl-last: rgba(212,154,42,.45);
  --hl-select: #f2c14e;
  --hl-move: rgba(35,134,95,.75);
  --hl-capture: rgba(192,57,43,.85);
  --hl-check: rgba(198,40,40,.9);
  --hl-hint: rgba(47,111,176,.85);

  /* графики: последовательная палитра категорий */
  --chart-1: #c0392b; --chart-2: #23865f; --chart-3: #2f6fb0; --chart-4: #d49a2a; --chart-5: #7b4fa3; --chart-6: #5b6b73;
  --chart-grid: rgba(43,34,28,.08);
  --chart-axis: var(--ink-3);

  --shadow-1: 0 1px 2px rgba(60,40,20,.08), 0 1px 1px rgba(60,40,20,.04);
  --shadow-2: 0 4px 14px rgba(60,40,20,.10), 0 1px 3px rgba(60,40,20,.06);
  --shadow-3: 0 12px 32px rgba(60,40,20,.16), 0 3px 8px rgba(60,40,20,.08);
  --focus: 0 0 0 3px rgba(192,57,43,.35);

  color-scheme: light;
}

/* тёмная тема: и по системе, и принудительно */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15120f; --bg-pattern: rgba(255,220,170,.03);
    --surface: #211c17; --surface-2: #2a241e; --surface-3: #352d25; --border: #3a3129;
    --ink: #f3eadb; --ink-2: #bcae9c; --ink-3: #8a7d6e;
    --primary: #e0574a; --primary-hover: #ea6a5d; --primary-soft: #3d201b;
    --jade: #3fbf8a; --jade-soft: #173328; --gold: #e8b64a; --gold-soft: #3a2f16;
    --sky: #5a9be0; --sky-soft: #1b2a3b; --danger: #ef5350; --warn: #f0a030; --warn-soft: #3a2a12;
    --board-wood: #caa46a; --board-wood-2: #b58d52; --board-frame: #5e3c1c; --board-line: #3f2812;
    --board-river: #bb955d; --board-river-text: #5a3616;
    --piece-face: #f4e9d2; --piece-rim: #a88452; --piece-shadow: rgba(0,0,0,.5);
    --chart-1: #e0574a; --chart-2: #3fbf8a; --chart-3: #5a9be0; --chart-4: #e8b64a; --chart-5: #a57bd1; --chart-6: #8fa0a8;
    --chart-grid: rgba(243,234,219,.08);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 14px rgba(0,0,0,.45); --shadow-3: 0 12px 32px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15120f; --bg-pattern: rgba(255,220,170,.03);
  --surface: #211c17; --surface-2: #2a241e; --surface-3: #352d25; --border: #3a3129;
  --ink: #f3eadb; --ink-2: #bcae9c; --ink-3: #8a7d6e;
  --primary: #e0574a; --primary-hover: #ea6a5d; --primary-soft: #3d201b;
  --jade: #3fbf8a; --jade-soft: #173328; --gold: #e8b64a; --gold-soft: #3a2f16;
  --sky: #5a9be0; --sky-soft: #1b2a3b; --danger: #ef5350; --warn: #f0a030; --warn-soft: #3a2a12;
  --board-wood: #caa46a; --board-wood-2: #b58d52; --board-frame: #5e3c1c; --board-line: #3f2812;
  --board-river: #bb955d; --board-river-text: #5a3616;
  --piece-face: #f4e9d2; --piece-rim: #a88452; --piece-shadow: rgba(0,0,0,.5);
  --chart-1: #e0574a; --chart-2: #3fbf8a; --chart-3: #5a9be0; --chart-4: #e8b64a; --chart-5: #a57bd1; --chart-6: #8fa0a8;
  --chart-grid: rgba(243,234,219,.08);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 14px rgba(0,0,0,.45); --shadow-3: 0 12px 32px rgba(0,0,0,.55);
  color-scheme: dark;
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}