/* ============================================================================
   FreedomCore Family — Design Tokens
   Single source of truth for the four-site franchise:
     MAVERICK (gold) · SHADOW (violet) · QUANTUM (cyan) · ARENA (silver)

   Imported by /css/style.css at the top of the file. Any sibling stylesheet
   that redefines a token below is a bug — fix the source, not the fork.

   Scale discipline:
     - 6 palette colors + 4 site accents (one per site, one active per page)
     - 8-step type scale (12/14/16/20/28/40/64/96)
     - 8-step spacing scale (8/16/24/32/48/64/96/128)
     - 2 durations (ui 240ms · hero 800ms), 1 spring, 1 ease
   ============================================================================ */

:root {
    /* ─── CORE PALETTE (locked, 4 neutrals) ──────────────────────────────── */
    --bg-primary:     #06111f;   /* page background: night-blue shell */
    --bg-elevated:    #0b1b31;   /* cards, panels, modals, nav */
    --bg-panel:       #102844;   /* launch-unified cards and dropdowns */
    --bg-field:       #08182b;   /* form fields, selects, compact controls */
    --bg-hover:       #14345a;   /* hover / selected card surface */
    --text-primary:   #f5f9ff;   /* body text, headings */
    --text-muted:     #a9bad2;   /* AA-readable on the night-blue shell */

    /* ─── SITE ACCENTS (exactly one active per page) ─────────────────────── */
    --accent-gold:        #ffd700;   /* MAVERICK identity */
    --accent-violet:      #8b5cf6;   /* SHADOW identity */
    --accent-cyan:        #3ea8f5;   /* QUANTUM identity (mid blue) */
    --accent-silver:      #c0c8d4;   /* ARENA identity */
    --accent-freedomcore: #38bdf8;   /* HUB / parent brand — electric blue */

    /* ─── TYPE SCALE (px → rem at 16px base) ─────────────────────────────── */
    --fs-12:  0.75rem;
    --fs-14:  0.875rem;
    --fs-16:  1rem;
    --fs-20:  1.25rem;
    --fs-28:  1.75rem;
    --fs-40:  2.5rem;
    --fs-64:  4rem;
    --fs-96:  6rem;

    /* ─── SPACING SCALE (8px base, same unit as our grid) ───────────────── */
    --sp-8:    0.5rem;
    --sp-16:   1rem;
    --sp-24:   1.5rem;
    --sp-32:   2rem;
    --sp-48:   3rem;
    --sp-64:   4rem;
    --sp-96:   6rem;
    --sp-128:  8rem;

    /* ─── MOTION ─────────────────────────────────────────────────────────── */
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:       cubic-bezier(0.4, 0, 0.2, 1);
    --duration-ui:    240ms;
    --duration-hero:  800ms;

    /* ─── BORDER + RADIUS (moved in from style.css / components.css) ─────── */
    /* R4 P4 — alpha bumped from 0.10/0.12 so 1px borders stay visible at 2x/3x DPR.
       Gemini-pattern: theme switch only flips --border-alpha; rgba composition is automatic. */
    --border-alpha:   0.14;
    --border:         rgba(245, 245, 250, var(--border-alpha));
    --border-strong:  rgba(174, 209, 255, 0.28);
    --radius-card:    10px;
    --radius-pill:    999px;
    --radius-button:  8px;
    --tap-target:     44px;

    /* ─── LAUNCH CHROME — one blue shell for every franchise surface ────── */
    --chrome-bg:      color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    --chrome-border:  var(--border-strong);
    --card-bg:        color-mix(in srgb, var(--bg-panel) 78%, var(--bg-elevated));
    --card-bg-hover:  color-mix(in srgb, var(--bg-hover) 86%, var(--bg-panel));
    --menu-bg:        color-mix(in srgb, #07182c 94%, transparent);
    --control-bg:     color-mix(in srgb, var(--bg-field) 92%, transparent);
    --control-hover:  color-mix(in srgb, var(--bg-hover) 82%, transparent);
    --shadow-elevated: 0 18px 50px rgba(0, 0, 0, 0.32);

    /* ─── LINE HEIGHT (used by streamline cockpit + future cockpits) ─────── */
    --lh-tight:       1.05;
    --lh-snug:        1.3;
    --lh-base:        1.5;
    --lh-loose:       1.6;

    /* ─── CHROME HEIGHTS (sticky stack arithmetic) ──────────────────────── */
    --nav-h:          64px;
    --nav-h-mobile:   56px;   /* R5 — explicit; was implicit via --hb-h */
    --hb-h:           56px;

    /* ─── R5 ADDITIONS — Site-accent derivative tiers (skeleton key) ──────
       color-mix() means these recompute automatically when --site-accent
       flips per body[data-site]. ONE token change repaints the franchise. */
    --site-accent-soft:  color-mix(in srgb, var(--site-accent) 24%, transparent);
    --site-accent-dim:   color-mix(in srgb, var(--site-accent) 12%, transparent);
    --site-accent-glow:  color-mix(in srgb, var(--site-accent) 38%, transparent);

    /* Text colour painted ON TOP of an accent-filled surface (CTAs, pill tabs). */
    --text-on-accent:    #0a0a0f;

    /* Accent-as-text (R4 P1). Dark-mode full saturation passes AA; light-mode
       is rebound per-site below to AA-safe variants. */
    --site-accent-text:  var(--site-accent);

    /* ─── R5 ADDITIONS — Breakpoints (R4 P6 — 780px is codebase canonical) ─ */
    --bp-mobile:         780px;
    --bp-desktop:        1120px;

    /* ─── R5 ADDITIONS — Overlay / scrim ─────────────────────────────────── */
    --overlay-bg:        rgba(10, 10, 15, 0.60);
    --overlay-blur:      blur(8px);

    /* ─── R5 ADDITIONS — Z-index scale ───────────────────────────────────── */
    --z-nav:             100;
    --z-backdrop:        199;
    --z-panel:           200;
}

/* ─── LIGHT THEME OVERRIDES ─────────────────────────────────────────────────
   Only surface + text tokens flip. Accents stay the same identity colors but
   are shifted slightly darker for contrast on light backgrounds.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
    --bg-primary:     #eaf4ff;
    --bg-elevated:    #f8fbff;
    --bg-panel:       #dcecff;
    --bg-field:       #eef7ff;
    --bg-hover:       #cfe4ff;
    --text-primary:   #07111f;
    --text-muted:     #435872;

    --accent-gold:    #c89b00;
    --accent-violet:  #6d3bcc;
    --accent-cyan:    #1e7fc4;
    --accent-silver:  #5a6270;
    /* Operator 2026-05-06 — day mode is still blue, just lighter and readable. */
    --accent-freedomcore: #0f5fa8;

    /* R4 P4 — light-mode border alpha 0.18 (was 0.12) for 1px visibility.
       Gemini pattern: same --border rgba() formula, only --border-alpha flips. */
    --border-alpha:   0.18;
    --border:         rgba(10, 10, 15, var(--border-alpha));
    --border-strong:  rgba(14, 77, 130, 0.26);
    --chrome-bg:      rgba(248, 251, 255, 0.94);
    --chrome-border:  var(--border-strong);
    --card-bg:        color-mix(in srgb, var(--bg-elevated) 78%, var(--bg-panel));
    --card-bg-hover:  color-mix(in srgb, var(--bg-hover) 84%, var(--bg-elevated));
    --menu-bg:        rgba(248, 251, 255, 0.98);
    --control-bg:     color-mix(in srgb, var(--bg-field) 92%, white);
    --control-hover:  color-mix(in srgb, var(--bg-hover) 84%, white);
    --shadow-elevated: 0 18px 42px rgba(14, 77, 130, 0.16);

    /* R4 P1 — text-on-light variants for accents that fail AA at full saturation.
       Pick: #8a6a00 (≥4.5:1 on #f5f5fa). Swap to #a67c00 if brand prefers — both pass AA. */
    --accent-gold-text:    #8a6a00;
    --accent-cyan-text:    #0e5e98;
    --site-accent-text:    var(--accent-violet);   /* default; rebound per-site below */
    --text-on-accent:      #f5f5fa;
}

/* ─── PER-SITE ACCENT BINDINGS ──────────────────────────────────────────────
   Each site stamps its identity onto a single var so cockpit stylesheets read
   one token. One accent active per page; cross-site links resolve via the
   data-fc attribute (set in markup).
   ─────────────────────────────────────────────────────────────────────────── */
body[data-site="maverick"] { --site-accent: var(--accent-gold);        }
body[data-site="shadow"]   { --site-accent: var(--accent-violet);      }
body[data-site="quantum"]  { --site-accent: var(--accent-cyan);        }
body[data-site="arena"]    { --site-accent: var(--accent-silver);      }
/* PR1 follow-up · 2026-04-30 — Hub gets its OWN identity (light blue), not
   borrowed Maverick gold. Matches the burger menu .fc-fam-head color. */
body[data-site="apex"],
body[data-site="freedomcore"] { --site-accent: var(--accent-freedomcore); }

/* R4 P1 — light-mode per-site accent-text rebinding so every site's CTAs/eyebrows
   render at AA contrast on #f5f5fa. Maverick & Quantum need darker variants;
   Shadow & Arena already pass at full saturation. */
[data-theme="light"] body[data-site="maverick"]    { --site-accent-text: var(--accent-gold-text); }
[data-theme="light"] body[data-site="shadow"]      { --site-accent-text: var(--accent-violet);    }
[data-theme="light"] body[data-site="quantum"]     { --site-accent-text: var(--accent-cyan-text); }
[data-theme="light"] body[data-site="arena"]       { --site-accent-text: var(--accent-silver);    }
[data-theme="light"] body[data-site="apex"],
[data-theme="light"] body[data-site="freedomcore"] { --site-accent-text: var(--accent-freedomcore); }

[data-fc="freedomcore"],
[data-fc="apex"]       { color: var(--accent-freedomcore); }
[data-fc="maverick"]   { color: var(--accent-gold);        }
[data-fc="shadow"]     { color: var(--accent-violet);      }
[data-fc="quantum"]    { color: var(--accent-cyan);        }
[data-fc="arena"]      { color: var(--accent-silver);      }
/* PR1 follow-up · 2026-04-30 — Streamline (data spine, neutral) and Sovereign
   (gated access tier, premium gold). One token change here propagates to every
   place those modules are referenced franchise-wide. */
[data-fc="streamline"] { color: var(--text-primary); }
[data-fc="sovereign"]  { color: var(--accent-gold);  }