/* ─────────────────────────────────────────────────────────────────────────────
   x³⁵⁸ Design Tokens
   Extracted from the legacy monolith (removed) — single source of truth for colors, fonts.
   Import this first in every screen and component.
──────────────────────────────────────────────────────────────────────────── */

/* ── Цветове на марката (ЕДИН източник; логото: workers/tools/logo-build.py; JS: src/shared/brand.js) ──
   --brand   мастър цвят — тъмносиньото: бутони, икони, таб бар, пилон
   --brand-2 второстепенно синьо (циан): акценти, главен бутон на екрана, в тъмна тема заменя --brand
   --brand-ruby рубинено червено: рубини, битка, предупреждения към марката
   Всички останали сини токени (--pen, --blue-d, --blue-l, --biro, --accent) идват от тези три. */
:root { --brand: #0b1b4d; --brand-2: #38bdf8; --brand-ruby: #e11d48; }
/* Цветове на характеристиките на героя — собствени, не са част от марката: сила = синьо (живот = червено, щастие = зелено, екипировка = жълто) */
:root { --stat-str: #2563d6; }

/* Light mode (default) */
:root {
  --paper:     #f2f7fd;
  --grid:      #dce8f6;
  --card:      #ffffff;
  --ink:       var(--brand);
  --soft:      #52688a;
  --line:      #b9cde6;

  --pen:       var(--brand);
  --pen-fg:    #ffffff;
  --pen-soft:  #dde9fb;
  --biro:      var(--brand);
  --accent:    var(--brand-2);
  --accent-soft: #dff0ff;

  --red:       #c5281f;
  --red-soft:  #fdeceb;
  --green:     #157a4a;
  --green-soft: #e4f5ec;

  --ruby:      var(--brand-ruby);
  --flame:     #f26a0f;
  --flame-in:  #ffc933;
  --gold:      #e8a400;
  --gold-soft: #fff3cf;
  --boss:      #27479e;
  --boss-soft: #dfe5fa;
  --on-solid:  #ffffff;

  --fill:      #e4edf8;
  --shadow:    0 2px 10px rgba(20, 60, 120, .1);

  --f-hand:  'Andika', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;   /* без ръкописен шрифт: един стандартен */
  --f-ui:    'Andika', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-math:  'STIX Two Text', 'Cambria Math', 'Times New Roman', serif;

  color-scheme: light;
}

/* Dark mode — system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0f1a2e;
    --grid:       #182640;
    --card:       #16233d;
    --ink:        #eaf1ff;
    --soft:       #9db0d0;
    --line:       #2c4166;

    --pen:        var(--brand-2);
    --pen-fg:     #06142a;
    --pen-soft:   #1d3358;
    --biro:       var(--brand-2);
    --accent:     var(--brand-2);
    --accent-soft: #1b3350;

    --red:        #ff9188;
    --red-soft:   #3a2321;
    --green:      #7fdca9;
    --green-soft: #1d3a2c;

    --ruby:       #ff4d6d;
    --flame:      #ff8a3d;
    --flame-in:   #ffd866;
    --gold:       #ffcf4a;
    --gold-soft:  #3b3417;
    --boss:       #9fb8ff;
    --boss-soft:  #222f57;
    --on-solid:   #0f1a2e;

    --fill:       #1d2d4d;
    --shadow:     0 2px 12px rgba(0, 0, 0, .35);

    color-scheme: dark;
  }
}

/* Dark mode — explicit toggle */
:root[data-theme="dark"] {
  --paper:      #0f1a2e;
  --grid:       #182640;
  --card:       #16233d;
  --ink:        #eaf1ff;
  --soft:       #9db0d0;
  --line:       #2c4166;

  --pen:        var(--brand-2);
  --pen-fg:     #06142a;
  --pen-soft:   #1d3358;
  --biro:       var(--brand-2);
  --accent:     var(--brand-2);
  --accent-soft: #1b3350;

  --red:        #ff9188;
  --red-soft:   #3a2321;
  --green:      #7fdca9;
  --green-soft: #1d3a2c;

  --ruby:       #ff4d6d;
  --flame:      #ff8a3d;
  --flame-in:   #ffd866;
  --gold:       #ffcf4a;
  --gold-soft:  #3b3417;
  --boss:       #9fb8ff;
  --boss-soft:  #222f57;
  --on-solid:   #0f1a2e;

  --fill:       #1d2d4d;
  --shadow:     0 2px 12px rgba(0, 0, 0, .35);

  color-scheme: dark;
}

/* ── Три нива (внимание / в крачка / отлично) — едни и същи цветове в родителския и в детския изглед (правилата са в shared/tier-rules.js).
   --s-*: ярък цвят (плочки, ленти, купа); --t-*: блед фон; --t-*-ink: текст върху блед фон; --t-*-bar: по-тъмен за ленти и числа. ── */
:root { --s-att: #ff8a50; --s-mid: #ffc933; --s-ok: #8ad94a; --s-gs: #9db8ff; --s-ink: var(--brand); --s-ink2: #2b3f5c; --t-att: #ffe3d1; --t-att-ink: #8f3a00; --t-mid: #fff1c7; --t-mid-ink: #6f4a00; --t-ok: #dff3e8; --t-ok-ink: #0d5a35; --t-att-bar: #f26a0f; --t-mid-bar: #b87f00; --t-ok-bar: #157a4a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-att: rgba(242, 106, 15, .24); --t-att-ink: #ffb88a; --t-mid: rgba(232, 164, 0, .22); --t-mid-ink: #ffd666; --t-ok: rgba(40, 170, 100, .22); --t-ok-ink: #7fe0aa; } }
:root[data-theme="dark"] { --t-att: rgba(242, 106, 15, .24); --t-att-ink: #ffb88a; --t-mid: rgba(232, 164, 0, .22); --t-mid-ink: #ffd666; --t-ok: rgba(40, 170, 100, .22); --t-ok-ink: #7fe0aa; }

/* движещата се рамка на Хиксор: само двата марков цвята (циан ↔ тъмно синьо; в тъмна тема тъмното синьо се губи — светъл циан) */
:root { --ai-g2: var(--brand); }
:root[data-theme="dark"] { --ai-g2: #bfeaff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ai-g2: #bfeaff; } }