/* ============================================================================
   theme-broodwar.css — the Broodwar niche's visual identity (PER-NICHE file).
   Copy/replace this one file (plus the font binaries it references) to
   re-skin the whole site for a new niche; design-system.css (loaded after)
   consumes these variables and never changes between niches.

   First cut of the dark look (2026-08-02): Andrew's ink palette from the
   design sketch + surfaces/semantics authored to match — iterate on VALUES
   here freely, nothing else needs touching. The original light palette
   lives on as theme-default.css (dev preview: /?theme=default).

   Fonts are self-hosted (SIL OFL — see fonts/OFL.txt); never hotlink a
   font CDN (GDPR + third-party dependency).
   ========================================================================== */

@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/chakra-petch-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/chakra-petch-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/chakra-petch-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/chakra-petch-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: dark;   /* dark UA scrollbars, pickers, form internals */

    /* ---- type ---- */
    --font-display: 'Chakra Petch', 'Eurostile', system-ui, sans-serif;
    --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* No 'IBM Plex Mono': we never shipped a @font-face for it, so naming it
       was a promise the theme couldn't keep — it resolved to ui-monospace for
       everyone except the few with it installed locally, making mono text a
       lottery. ui-monospace already picks the right platform mono. */
    --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* ---- ink (text colors) — from the design sketch ---- */
    --ink-hi:     #EDEAF6;   /* titles / hero numbers / emphasis */
    --ink:        #D8D2EA;   /* body */
    --ink-mute:   #8A86A0;   /* captions, timestamps, sub-labels */
    --ink-faint:  #5F5B72;   /* placeholders, empty states */
    --ink-accent: #B7ADF0;   /* headings */

    /* ---- links & actions ---- */
    --link: #9a6bff;
    --accent:        #9a6bff;  --accent-hover: #ad85ff;   /* selection, active tab, links, primary actions */
    --accent-soft:   rgba(154, 107, 255, 0.20);           /* chart fills etc */
    --on-accent:     #FFFFFF;                             /* text on accent-colored things */
    /* Categorical chart series (group markets: one line per leg, up to the
       six-book cap). Distinct hues, tuned for the dark ground. */
    --series-1: #9a6bff;  --series-2: #4fc3d9;  --series-3: #e0b356;
    --series-4: #84d68f;  --series-5: #e08098;  --series-6: #7aa2e8;
    --danger-action: #D64550;  --danger-action-hover: #E5555F;
    --neutral-action:#4A465E;  --neutral-action-hover: #5A5570;

    /* ---- buttons (bg / ink / bevel-hi / bevel-lo per variant) ---- */
    --btn-primary-bg:   #2e2150;  --btn-primary-ink:   #c9b8ff;
    --btn-primary-hi:   #4a3a7a;  --btn-primary-lo:    #0a0714;
    --btn-secondary-bg: #14121c;  --btn-secondary-ink: #b0aac4;
    --btn-secondary-hi: #3a3450;  --btn-secondary-lo:  #0c0a12;
    --btn-yes-bg:       #16301a;  --btn-yes-ink:       #84d68f;
    --btn-yes-hi:       #3a6a3f;  --btn-yes-lo:        #08160a;
    --btn-no-bg:        #331416;  --btn-no-ink:        #e88a8a;
    --btn-no-hi:        #6a3a3a;  --btn-no-lo:         #160808;

    /* ---- status semantics (text on matching -bg); ok doubles as the
       YES/positive green, danger as the NO/negative red ---- */
    --ok:     #84d68f;  --ok-bg:     #16301a;
    --danger: #e88a8a;  --danger-bg: #331416;
    --warn:   #d9a441;  --warn-bg:   #33280f;
    --warn-accent: #8A7527;  --warn-hover: #C4A53E;
    --info:   #7FD1E0;  --info-bg:   #12303A;

    /* ---- market sides (chart + order book + position markers) ---- */
    --yes: var(--ok);
    --no:  var(--danger);
    --yes-soft: rgba(132, 214, 143, 0.16);   /* chart fills */
    --no-soft:  rgba(232, 138, 138, 0.16);
    /* Settled (resolved) charts: the question is answered, the line goes
       grey - trend colors are for LIVE odds. */
    --settled:      #8A86A0;
    --settled-soft: rgba(138, 134, 160, 0.14);

    /* ---- highlight / processing (info-blue family) ---- */
    --hl:        #A8C7FA;
    --hl-bg:     #1A2740;
    --hl-border: #2E4370;

    /* ---- secondary accent (recent-events / freshness identity) ---- */
    --accent-alt: #A78BFA;

    /* ---- tabs (one accent; nesting carries level) ---- */
    --tab-active: var(--accent);

    /* ---- surfaces ---- */
    --surface-page:    #100c1a;   /* the violet "screen" behind everything */
    --surface-panel:   #0a0a0e;   /* near-black panel fill (not pure #000) */
    --surface-raised:  #16121e;   /* tiles sitting on a panel */
    --surface-inset:   #2C2839;   /* chips, resolved/disabled rows */
    --surface-hover:   #363150;   /* row/button hover states */
    --surface-inverse: #0D0B12;   --on-inverse: #EDEAF6;   /* user bar */
    --terminal-bg:     #0D0B12;   --terminal-ink: #C9C4DC; /* QA output */

    /* ---- panel chrome (bevel + the signature red inset line) ---- */
    --bevel-hi:   #2e2740;   /* top/left edge */
    --bevel-lo:   #050409;   /* bottom/right edge */
    --panel-line: #d23b2d;   /* the red 'digital' inset line */
    --radius:     8px;

    /* ---- data entry (the recessed field well) ---- */
    --field-bg:     #0c0910;   /* field background */
    --field-border: #2e2a3e;   /* quiet at rest */
    --focus:        #9a6bff;   /* accent ring on focus */
    --focus-ring:   rgba(154, 107, 255, 0.35);

    /* ---- borders ---- */
    --border:        #1c1926;   /* row separators */
    --border-mid:    #3A3550;   /* control outlines, tab edges */
    --border-strong: #2a2536;   /* header underline */

    /* ---- admin & QA affordances ---- */
    --admin-accent: #F59E0B;   /* admin subtabs, admin panel frame, queued states */
    --qa-bg:        #262214;   /* QA panel / QA-seeded row wash */

}