/* ============================================================================
   franchise-tokens-v2.css — Unified franchise design system, 2026-05-06.

   Source of truth: Quantum Spark build (Codex, 2026-05-06).
   Goal: ONE shared palette + type + spacing across freedomcore.io / maverick /
   shadow / arena / quantum, with per-site accent picked from the same set.

   Each site pins its identity via body[data-site="..."] -> --accent.
   No per-site palette duplication. Legacy tokens.css stays for surfaces not
   yet migrated; new sites should import THIS file instead.
   ============================================================================ */

:root {
    color-scheme: dark;

    /* ─── Surfaces (deep navy stack) ────────────────────────────────────── */
    --bg:            #02060d;
    --bg-2:          #06111f;
    --bg-3:          #091a2d;
    --panel:         rgba(7, 19, 34, 0.78);
    --panel-strong:  rgba(9, 28, 48, 0.9);

    /* ─── Lines & dividers (cyan-tinted) ────────────────────────────────── */
    --line:          rgba(148, 210, 255, 0.18);
    --line-strong:   rgba(82, 218, 255, 0.48);
    --border:        var(--line);
    --border-strong: var(--line-strong);

    /* ─── Text ──────────────────────────────────────────────────────────── */
    --text:          #f4fbff;
    --text-primary:  var(--text);
    --muted:         #a7bfd2;
    --text-dim:      var(--muted);
    --soft:          #6e8ca3;

    /* ─── Accent palette (one shared set, per-site selects below) ───────── */
    --cyan:          #4adeff;
    --blue:          #38bdf8;
    --green:         #4dffb5;
    --violet:        #a78bfa;
    --gold:          #f7d56b;
    --silver:        #c0c8d4;
    --amber:         #f5a623;
    --danger:        #ff5c7a;

    /* Default accent until body[data-site] overrides. */
    --accent:        var(--blue);
    --accent-soft:   color-mix(in srgb, var(--accent) 22%, transparent);
    --accent-glow:   color-mix(in srgb, var(--accent) 38%, transparent);

    /* ─── Geometry ──────────────────────────────────────────────────────── */
    --radius:        8px;
    --radius-large:  18px;
    --radius-pill:   999px;

    /* ─── Layout ────────────────────────────────────────────────────────── */
    --max:           1180px;
    --max-narrow:    920px;

    /* ─── Spacing scale (8-step) ────────────────────────────────────────── */
    --sp-4:   4px;
    --sp-8:   8px;
    --sp-12:  12px;
    --sp-16:  16px;
    --sp-24:  24px;
    --sp-32:  32px;
    --sp-48:  48px;
    --sp-64:  64px;
    --sp-96:  96px;

    /* ─── Type scale ────────────────────────────────────────────────────── */
    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-28: 1.75rem;
    --fs-40: 2.5rem;
    --fs-64: 4rem;

    /* ─── Fonts ─────────────────────────────────────────────────────────── */
    --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* ─── Shadows / depth ───────────────────────────────────────────────── */
    --shadow:        0 22px 80px rgba(0, 0, 0, 0.4);
    --shadow-card:   0 4px 12px rgba(0, 0, 0, 0.18);
}

/* ─── Per-site accent identity ──────────────────────────────────────────────
   The skeleton key. ONE variable change repaints the franchise.
   ─────────────────────────────────────────────────────────────────────────── */

body[data-site="freedomcore"],
body[data-site="apex"],
body[data-site="hub"]      { --accent: var(--blue);   }
body[data-site="maverick"] { --accent: var(--gold);   }
body[data-site="shadow"]   { --accent: var(--violet); }
body[data-site="quantum"]  { --accent: var(--cyan);   }
body[data-site="arena"]    { --accent: var(--silver); }

/* Recompute derivative accents whenever --accent changes. */
body { --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
       --accent-glow: color-mix(in srgb, var(--accent) 38%, transparent); }

/* ─── Day-mode override (optional, opt-in via [data-theme="light"]) ─────── */
[data-theme="light"] {
    color-scheme: light;
    --bg:            #eaf4ff;
    --bg-2:          #f4f9ff;
    --bg-3:          #ffffff;
    --panel:         rgba(255, 255, 255, 0.9);
    --panel-strong:  rgba(244, 249, 255, 0.95);
    --line:          rgba(15, 95, 168, 0.18);
    --line-strong:   rgba(15, 95, 168, 0.45);
    --border:        var(--line);
    --border-strong: var(--line-strong);
    --text:          #07111f;
    --text-primary:  var(--text);
    --muted:         #435872;
    --text-dim:      var(--muted);
    --soft:          #6c7e92;

    /* Day-mode accent variants (slightly darker for AA contrast on light). */
    --cyan:          #0e9bc9;
    --blue:          #0f5fa8;
    --green:         #1f9c70;
    --violet:        #6d3bcc;
    --gold:          #a17900;
    --silver:        #5a6270;
    --amber:         #b07415;
    --danger:        #b83a55;
}

/* ─── Universal box-sizing + smooth scroll ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { color: var(--text); font-family: var(--sans); background: var(--bg); }
::selection { color: #04111d; background: var(--cyan); }

/* ─── Skip link (a11y) ──────────────────────────────────────────────────── */
.skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 200;
    transform: translateY(-150%);
    padding: 10px 14px;
    color: #04111d; background: var(--accent);
    border-radius: var(--radius); font-weight: 800;
    transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ─── Focus ring (universal) ────────────────────────────────────────────── */
:where(a, button, [role="button"], [role="tab"], [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ============================================================================
   Compatibility aliases — let legacy stylesheets that reference older variable
   names keep working while sites migrate. Remove these once every page imports
   franchise-tokens-v2.css directly and no surface depends on old names.
   ============================================================================ */
:root {
    --accent-gold:        var(--gold);
    --accent-cyan:        var(--cyan);
    --accent-violet:      var(--violet);
    --accent-silver:      var(--silver);
    --accent-amber:       var(--amber);
    --accent-freedomcore: var(--blue);
    --site-accent:        var(--accent);
    --site-accent-soft:   var(--accent-soft);
    --site-accent-glow:   var(--accent-glow);
    --bg-primary:         var(--bg);
    --bg-elevated:        var(--bg-2);
    --surface:            var(--bg-2);
    --card:               var(--bg-2);
    --gold-bg:            color-mix(in srgb, var(--gold) 8%, transparent);
    --radius-card:        var(--radius-large);
    --radius-button:      var(--radius);
}