/* UFC Ukraine — design reboot «Чорне табло».
   Single source of truth for colors, type and shape. Components use ONLY these variables.
   Theme: follows the OS by default; <html data-theme="light|dark"> overrides it (set by the toggle). */

:root{
  /* type */
  --font-display:'Unbounded', 'Manrope', system-ui, sans-serif;   /* logo, headings, scores */
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* text, labels, numbers */
  --fs-label:.75rem;   /* 12px — uppercase labels, letter-spacing .12em, weight 700 */
  --fs-small:.875rem;  /* 14px — meta, captions */
  --fs-body:1.0625rem; /* 17px — body text, line-height 1.6 */
  --fs-lead:1.25rem;   /* 20px — article lead */
  --fs-h3:1.25rem;     /* Unbounded 600 */
  --fs-h2:clamp(1.375rem,2.4vw,1.75rem);   /* Unbounded 800 */
  --fs-h1:clamp(1.75rem,4.4vw,3rem);       /* Unbounded 800 */
  --fs-score:clamp(2rem,5vw,3.5rem);       /* Manrope 800 tabular-nums */

  /* shape */
  --skew:-12deg;       /* plaques and the logo are skewed by this angle */
  --r-sm:4px; --r-md:8px; --r-lg:12px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --content:1200px;    /* page width */
  --measure:680px;     /* article text column */

  /* brand constants (same in both themes) */
  --plaque:#FFE14D;        /* yellow plaque fill — always with --plaque-ink text */
  --plaque-ink:#0B0B0B;
  --focus:#FFE14D;
}

/* ---------- dark (default) ---------- */
:root,
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0B0B;
  --surface:#181818;
  --surface-2:#1F1F1F;
  --line:#2E2E2E;
  --text:#FFFFFF;
  --text-muted:#A3A3A3;
  --logo-ufc-bg:#FFFFFF; --logo-ufc-ink:#0B0B0B;
  --live:#FF3B30;          /* LIVE badge, errors */
  --pred-hit:#3DDC84;           /* prediction: exact hit */
  --pred-winner:#FFE14D;        /* prediction: right winner, wrong method (as plaque) */
  --pred-miss:#FF3B30;          /* prediction: miss */
  --pred-none:#6B6B6B;          /* no valid prediction */
  --champion:#FFE14D;
  --link:#FFFFFF; --link-underline:#FFE14D;
}

/* ---------- light ---------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#F5F5F2;
    --surface:#FFFFFF;
    --surface-2:#EDEDE8;
    --line:#DCDCD6;
    --text:#0B0B0B;
    --text-muted:#5C5C5C;
    --logo-ufc-bg:#0B0B0B; --logo-ufc-ink:#FFFFFF;
    --live:#D21F16;
    --pred-hit:#138A4B;
    --pred-winner:#FFE14D;
    --pred-miss:#D21F16;
    --pred-none:#8A8A85;
    --champion:#0B0B0B;
    --link:#0B0B0B; --link-underline:#E0B800;
    --focus:#0B0B0B;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F5F2;
  --surface:#FFFFFF;
  --surface-2:#EDEDE8;
  --line:#DCDCD6;
  --text:#0B0B0B;
  --text-muted:#5C5C5C;
  --logo-ufc-bg:#0B0B0B; --logo-ufc-ink:#FFFFFF;
  --live:#D21F16;
  --pred-hit:#138A4B;
  --pred-winner:#FFE14D;
  --pred-miss:#D21F16;
  --pred-none:#8A8A85;
  --champion:#0B0B0B;
  --link:#0B0B0B; --link-underline:#E0B800;
  --focus:#0B0B0B;
}

/* ---------- compatibility layer ----------
   Old article CSS stored in D1 (ufc331-*, fb-*, event-analysis-menu…) reads the legacy variables.
   Map them to the new tokens so old pages render correctly in both themes without editing content. */
:root{
  --canvas:var(--bg);
  --canvas-raised:var(--surface);
  --canvas-sunk:var(--surface-2);
  --ink:var(--text);
  --ink-soft:var(--text-muted);
  --steel:var(--text-muted);
  --line-strong:var(--line);
  --blood:var(--live);
  --blood-deep:var(--live);
  --blood-tint:color-mix(in srgb, var(--live) 12%, transparent);
  --gold:var(--plaque);
  --champ-abbr:var(--champion);
  --gold-tint:color-mix(in srgb, var(--plaque) 16%, transparent);
  --winner:var(--pred-hit);
  --winner-tint:color-mix(in srgb, var(--pred-hit) 12%, transparent);
  --slab-bg:var(--surface);
  --slab-bg-raised:var(--surface-2);
  --slab-fg:var(--text);
  --slab-fg-dim:var(--text-muted);
  --slab-line:var(--line);
}
/* Legacy --winner (green "winner" text) maps to --pred-hit. */