/* =============================================================================
   MatchCore design tokens -- shared by every frontend/<principle>/css/style.css
   via @import at the top of that file.
   =============================================================================
   Rebranding = editing values in this ONE file. Nothing else in any style.css
   or *.html/*.js should hardcode a color, radius, shadow, or font -- always
   reference one of these custom properties instead (see README note at the
   bottom of this file for the one JS-side exception these tokens can't reach).

   Two themes, one token set: bare :root is the light default ("Copenhagen
   Ink"); the prefers-color-scheme block below supplies the dark values
   ("Night Desk") for a dark-OS visitor who hasn't made an explicit choice;
   [data-theme="dark"] / [data-theme="light"] let the header toggle
   (frontend/js/theme.js) force either one regardless of OS setting. Every
   component references the same variable names in both themes -- see
   frontend/css/shell.css.
   ============================================================================= */

:root {
  /* ---- Brand palette (light / "Copenhagen Ink") --------------------------
     Confident, regulated-exchange fintech, not a generic SaaS gray dashboard:
     deep ink navy + a distinctive indigo accent, on a cool off-white ground. */
  --ink-950: #0b1220;
  --ink-800: #16213a;
  --ink-600: #3a4a6b;

  --bg: #f5f6fb;
  --bg-alt: #eaedf5;
  --panel-bg: #ffffff;
  --panel-bg-raised: #ffffff;
  --border: #e2e6f0;
  --border-strong: #cbd2e3;

  --text: var(--ink-950);
  --text-dim: #5b6478;
  --text-faint: #98a1b5;

  /* Brand accent -- indigo, used for links, primary buttons, focus, active
     tabs, chart lines. --accent-2 is a teal reserved for secondary emphasis
     (e.g. "live" indicators) so the palette has one clear primary, not two
     competing accents. */
  --accent: #3450e6;
  --accent-hover: #263bc4;
  --accent-bg: #e8ecff;
  --accent-2: #0f9e9e;
  --accent-2-bg: #e1f5f5;

  /* Semantic trading colors -- YES/BUY vs NO/SELL. Kept conceptually stable
     (traders read green=up/yes, red=down/no on sight) but tuned to sit well
     next to the indigo accent rather than a flat SaaS green/red. */
  --yes: #0ea968;
  --yes-bg: #e4f7ee;
  --yes-bg-strong: rgba(14, 169, 104, 0.35);
  --yes-strong: #087a4b;
  --no: #e5484d;
  --no-bg: #fdeaeb;
  --no-bg-strong: rgba(229, 72, 77, 0.35);
  --no-strong: #b9302f;

  --warn: #b7791f;
  --warn-bg: #fbf0dd;

  /* Per-outcome identity colors (pari-mutuel featured cards, 2026-08-23) -- deliberately not
     --yes/--no, which carry win/loss semantics elsewhere and would mislead applied to an arbitrary
     outcome. Cycled by outcome index (seriesColor() in poolFeatured.js) so a given outcome's
     leaderboard underline and its chart line are always the same color on one card. First two
     reuse the existing brand accents; the rest are new, chosen to stay visually distinct from
     --yes/--no/--warn and from each other at a glance. */
  --series-1: var(--accent);
  --series-2: var(--accent-2);
  --series-3: #e08a2e;
  --series-4: #a34ee0;
  --series-5: #d4488f;
  --series-6: #4e8ee0;

  /* ---- Type ---------------------------------------------------------------
     System font stack only (no extra CDN font dependency) -- the "designed"
     feel comes from weight/size/spacing choices, not a webfont. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* ---- Scale ---------------------------------------------------------------
     A handful of shared radii/shadows/spacing steps -- not a full system,
     just enough that "rounder" or "flatter" is also a one-file change. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 26px -6px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 20px 48px -10px rgba(15, 23, 42, 0.2);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Subtle brand gradient -- used sparingly (header underline, hero accents,
     avatar-fallback badges), never as a full-page background. */
  --gradient-brand: linear-gradient(135deg, var(--accent) 0%, #6a3bfb 100%);

  /* Live/updating-element glow -- off in light mode, a soft accent glow in
     dark mode (see below). Used on things like a just-changed price or a
     pulsing "live" dot; kept as one token so it toggles everywhere at once. */
  --glow: none;
}

/* ---- Dark theme ("Night Desk") --------------------------------------------
   Applies when the OS is set to dark AND the visitor hasn't explicitly chosen
   light (the :not([data-theme="light"]) guard). A denser, higher-contrast
   trading-terminal register -- same component set, same variable names. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-950: #e8ebf5;
    --ink-800: #b7bdd1;
    --ink-600: #8992ab;

    --bg: #0a0e17;
    --bg-alt: #131826;
    --panel-bg: #10141f;
    --panel-bg-raised: #171c2b;
    --border: #232a3d;
    --border-strong: #313a54;

    --text: var(--ink-950);
    --text-dim: #8992ab;
    --text-faint: #545c73;

    --accent: #6d87ff;
    --accent-hover: #8ea0ff;
    --accent-bg: rgba(109, 135, 255, 0.14);
    --accent-2: #35e0d0;
    --accent-2-bg: rgba(53, 224, 208, 0.12);

    --yes: #2fd88a;
    --yes-bg: rgba(47, 216, 138, 0.12);
    --yes-bg-strong: rgba(47, 216, 138, 0.32);
    --yes-strong: #6df0af;
    --no: #ff5d69;
    --no-bg: rgba(255, 93, 105, 0.12);
    --no-bg-strong: rgba(255, 93, 105, 0.32);
    --no-strong: #ff97a0;

    --warn: #e0a94a;
    --warn-bg: rgba(224, 169, 74, 0.14);

    --series-1: var(--accent);
    --series-2: var(--accent-2);
    --series-3: #f0a850;
    --series-4: #c485ec;
    --series-5: #ec7ab3;
    --series-6: #7aabf0;

    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 14px 32px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.7);

    --gradient-brand: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    --glow: drop-shadow(0 0 6px currentColor);
  }
}

/* Explicit choice from the header toggle (frontend/js/theme.js) always wins,
   regardless of OS setting -- same values as the media-query block above. */
:root[data-theme="dark"] {
  --ink-950: #e8ebf5;
  --ink-800: #b7bdd1;
  --ink-600: #8992ab;

  --bg: #0a0e17;
  --bg-alt: #131826;
  --panel-bg: #10141f;
  --panel-bg-raised: #171c2b;
  --border: #232a3d;
  --border-strong: #313a54;

  --text: var(--ink-950);
  --text-dim: #8992ab;
  --text-faint: #545c73;

  --accent: #6d87ff;
  --accent-hover: #8ea0ff;
  --accent-bg: rgba(109, 135, 255, 0.14);
  --accent-2: #35e0d0;
  --accent-2-bg: rgba(53, 224, 208, 0.12);

  --yes: #2fd88a;
  --yes-bg: rgba(47, 216, 138, 0.12);
  --yes-bg-strong: rgba(47, 216, 138, 0.32);
  --yes-strong: #6df0af;
  --no: #ff5d69;
  --no-bg: rgba(255, 93, 105, 0.12);
  --no-bg-strong: rgba(255, 93, 105, 0.32);
  --no-strong: #ff97a0;

  --warn: #e0a94a;
  --warn-bg: rgba(224, 169, 74, 0.14);

  --series-1: var(--accent);
  --series-2: var(--accent-2);
  --series-3: #f0a850;
  --series-4: #c485ec;
  --series-5: #ec7ab3;
  --series-6: #7aabf0;

  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 14px 32px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.7);

  --gradient-brand: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --glow: drop-shadow(0 0 6px currentColor);
}

/* JS-side note: pillColor()/inline style="color:..." helpers in index.html
   scripts should resolve to CSS classes (.pill-yes/.pill-no/.pill-neutral),
   never hardcode a hex value -- see frontend/*/index.html. Same rule now
   applies to the wordmark: frontend/js/branding.js's wordmarkSvg() colors
   itself via var(--accent)/var(--accent-2), never a literal hex. */