/* ============================================================
   DCS MISSION COMMAND — Design Tokens
   Foundation layer. Load BEFORE style.css and themes.css.
   Themes may override --bg-*, --text-*, --amber, etc.
   These tokens (typography, spacing, radius, shadow, motion)
   stay constant across all themes — they define the SYSTEM.
   ============================================================ */

:root {
    /* --- Typography scale (JetBrains Mono everywhere) --- */
    --t-hero-size:   32px;
    --t-hero-weight: 700;
    --t-hero-track:  3px;
    --t-hero-case:   uppercase;

    --t-h1-size:   22px;
    --t-h1-weight: 600;
    --t-h1-track:  2px;
    --t-h1-case:   uppercase;

    --t-h2-size:   16px;
    --t-h2-weight: 600;
    --t-h2-track:  1px;
    --t-h2-case:   uppercase;

    --t-h3-size:   14px;
    --t-h3-weight: 600;
    --t-h3-track:  0.5px;
    --t-h3-case:   uppercase;

    --t-body-size:    14px;
    --t-body-weight:  400;
    --t-body-track:   0;
    --t-body-height:  1.55;

    --t-label-size:   12px;
    --t-label-weight: 500;
    --t-label-track:  1.4px;
    --t-label-case:   uppercase;

    --t-data-size:    13px;
    --t-data-weight:  500;
    --t-data-track:   0.3px;

    --t-mono-micro:   10px;

    /* --- Spacing scale (4px base, no loose values) --- */
    --s-0: 0;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    /* --- Radius (2px everywhere — militaristic, no rounded) --- */
    --r-0: 0;
    --r-1: 2px;
    --r-2: 4px;
    --r-pill: 999px;

    /* --- Borders --- */
    --bw-thin:  1px;
    --bw-thick: 2px;

    /* --- Shadow lift --- */
    --lift-0: none;
    --lift-1: 0 2px 6px rgba(0, 0, 0, 0.25);
    --lift-2: 0 6px 16px rgba(0, 0, 0, 0.35);
    --lift-3: 0 14px 30px rgba(0, 0, 0, 0.45);
    --lift-4: 0 24px 60px rgba(0, 0, 0, 0.55);

    /* --- Motion --- */
    --m-fast:   100ms;
    --m-base:   180ms;
    --m-slow:   320ms;
    --m-ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
    --m-easein: cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Layout rails --- */
    --hud-header-h: 48px;
    --hud-footer-h: 24px;
    --sidebar-w:    48px;
    --sidebar-w-open: 240px;
    --max-content:  1440px;

    /* --- Z-index map --- */
    --z-base:    1;
    --z-sticky:  50;
    --z-hud:     100;
    --z-overlay: 500;
    --z-modal:   1000;
    --z-toast:   2000;

    /* --- Semantic aliases used by components.css (resolve to theme vars) --- */
    --c-accent:        var(--amber);
    --c-accent-dim:    var(--amber-dim);
    --c-success:       var(--green-accent);
    --c-warn:          #ffaa00;
    --c-crit:          var(--red);
    --c-surface-0:     var(--bg-primary);
    --c-surface-1:     var(--bg-panel);
    --c-surface-2:     var(--bg-panel-alt);
    --c-surface-3:     var(--bg-elevated);
    --c-line:          var(--border);
    --c-line-active:   var(--border-active);
    --c-text:          var(--text-primary);
    --c-text-dim:      var(--text-secondary);
    --c-text-bright:   var(--text-bright);
}

/* --- Utility classes (optional, opt-in) --- */
.t-hero  { font-family: var(--font-mono); font-size: var(--t-hero-size); font-weight: var(--t-hero-weight); letter-spacing: var(--t-hero-track); text-transform: var(--t-hero-case); }
.t-h1    { font-family: var(--font-mono); font-size: var(--t-h1-size);   font-weight: var(--t-h1-weight);   letter-spacing: var(--t-h1-track);   text-transform: var(--t-h1-case); }
.t-h2    { font-family: var(--font-mono); font-size: var(--t-h2-size);   font-weight: var(--t-h2-weight);   letter-spacing: var(--t-h2-track);   text-transform: var(--t-h2-case); }
.t-h3    { font-family: var(--font-mono); font-size: var(--t-h3-size);   font-weight: var(--t-h3-weight);   letter-spacing: var(--t-h3-track);   text-transform: var(--t-h3-case); }
.t-body  { font-family: var(--font-mono); font-size: var(--t-body-size); font-weight: var(--t-body-weight); line-height: var(--t-body-height); }
.t-label { font-family: var(--font-mono); font-size: var(--t-label-size);font-weight: var(--t-label-weight);letter-spacing: var(--t-label-track);text-transform: var(--t-label-case); color: var(--c-text-dim); }
.t-data  { font-family: var(--font-mono); font-size: var(--t-data-size); font-weight: var(--t-data-weight); letter-spacing: var(--t-data-track); font-variant-numeric: tabular-nums; }
.t-dim   { color: var(--c-text-dim); }
.t-bright{ color: var(--c-text-bright); }
.t-accent{ color: var(--c-accent); }
.t-crit  { color: var(--c-crit); }

/* Global body zoom removed — resolution-based CSS zoom caused fixed-position
   elements (site-footer, hud-statusline) to pin to the zoomed body's box
   instead of the viewport in modern Chrome, leaving gaps. Non-lobby pages
   now render at 100% at every width. Lobby keeps its own zoom in lobby.css. */

/* ============================================================
   RESPONSIVE SCALE — adjust tokens per viewport.
   Breakpoints mapped to the most common display widths.
   Legacy hardcoded px in style.css/page css are unaffected;
   this retunes ui-* components and any token consumers.
   ============================================================ */

/* Compact laptops: 1366×768, 1440×900 */
@media (max-width: 1599px) {
    :root {
        --t-hero-size:  26px;
        --t-h1-size:    20px;
        --t-h2-size:    15px;
        --t-h3-size:    13px;
        --t-body-size:  13px;
        --t-label-size: 11px;
        --t-data-size:  12px;
        --s-4: 14px;
        --s-5: 20px;
        --s-6: 28px;
        --s-7: 40px;
        --hud-header-h: 44px;
        --hud-footer-h: 22px;
    }
}

/* Desktop FullHD: 1600×900, 1920×1080 — DEFAULT (no override) */

/* QHD: 2560×1440 */
@media (min-width: 2400px) {
    :root {
        --t-hero-size:  36px;
        --t-h1-size:    24px;
        --t-h2-size:    17px;
        --t-h3-size:    15px;
        --t-body-size:  15px;
        --t-label-size: 13px;
        --t-data-size:  14px;
        --s-4: 18px;
        --s-5: 28px;
        --s-6: 36px;
        --s-7: 52px;
        --hud-header-h: 52px;
        --hud-footer-h: 26px;
    }
}

/* Ultra-wide 3440 + 4K 3840 share the QHD (2400–3199) token scale. */

/* Tablets: 768–1023 (portrait) — shrink HUD, keep readable body */
@media (max-width: 1023px) {
    :root {
        --t-hero-size:  22px;
        --t-h1-size:    18px;
        --t-h2-size:    14px;
        --t-body-size:  13px;
        --t-label-size: 11px;
        --s-4: 12px;
        --s-5: 16px;
        --hud-header-h: 40px;
        --hud-footer-h: 20px;
    }
}

/* Mobile: <720 — HUD statusline gets a minimal single-line layout */
@media (max-width: 719px) {
    :root {
        --t-hero-size:  20px;
        --t-h1-size:    16px;
        --t-h2-size:    13px;
        --t-body-size:  12px;
        --t-label-size: 10px;
        --s-4: 10px;
        --s-5: 14px;
    }
}