/**
 * War 2050 - Game UI Design Tokens
 * Extends landing page variables for in-game experience
 */

:root {
    /* =================================================================
       COLOR PALETTE - Military Strategic Theme
       ================================================================= */

    /* Primary backgrounds (dark military tones) */
    --color-primary-900: #0a0f1a;
    --color-primary-800: #111827;
    --color-primary-700: #1a2744;
    --color-primary-600: #243352;
    --color-primary-500: #2d4163;

    /* Accent colors */
    --color-accent-gold: #d4af37;
    --color-accent-gold-light: #f4d03f;
    --color-accent-gold-dark: #b8962f;
    /* War Bonds. They had no colour of their own, so every price quoted in
       bonds was drawn in gold — the colour of the gold resource — and a "100"
       on a rent button read as 100 gold.
       They are PAPER AND INK: a bond is a printed instrument, so it is drawn
       the way one is — off-white stock, black impression, hairline rules. That
       does the same job a hue would (gold, cyan and green are the three
       resources and red is danger, so bonds are none of them) while saying what
       the currency is rather than merely labelling it. A paper panel among dark
       ones reads as a DOCUMENT, which is exactly what is being bought.
       Paper is warm, not pure white — #fff on a dark screen glares, and no
       certificate was ever printed on it. */
    --color-bond-paper: #ece7da;
    --color-bond-paper-lit: #f7f4ec;  /* held down / hovered */
    --color-bond-ink: #0a0b0d;
    --color-bond-ink-soft: rgba(10, 11, 13, 0.62);  /* secondary print */
    --color-bond-rule: rgba(10, 11, 13, 0.22);      /* engraved hairline */
    /* Kept under their old names: every existing bond use wanted "the bond
       colour on a dark surface", which is the paper. */
    --color-accent-bond: #ece7da;
    --color-accent-bond-dark: #c9c2b0;
    --color-accent-cyan: #06b6d4;
    --color-accent-cyan-light: #22d3ee;
    --color-accent-green: #059669;
    --color-accent-green-light: #10b981;
    --color-accent-red: #dc2626;
    --color-accent-red-light: #ef4444;
    /* The handbook needed a lighter orange for long-form body copy on a dark
       page and had no shared name to reach for, so it invented `--orange:
       #fb923c` locally. Named here so the three roots agree on paper as well
       as in value. */
    --color-accent-orange-light: #fb923c;
    /* Two reds that exist only because of contrast, not because the palette
       wanted more reds — see docs/TYPE-LEGIBILITY.md rule 2.
       -dark:   white text on --color-accent-red-light measures 3.58:1, which
                is what made .hud-badge-alert (the unread-transmission count)
                the worst real contrast failure in the HUD. On this it is
                6.2:1 and the badge stays unmistakably red.
       -bright: --color-accent-red-light as *text* on the Overseer box's
                translucent red badge fill measures 4.45:1. This is 6.0:1.
                It is the same red the life bar already uses for its label. */
    --color-accent-red-dark: #b91c1c;
    --color-accent-red-bright: #f87171;
    --color-accent-orange: #ea580c;

    /* Text colors */
    --color-text-primary: #f8fafc;
    --color-text-secondary: #94a3b8;
    /* Was #64748b (slate-500). That measured 4.02:1 on the darkest background
       and only 3.11:1 on the panel fill rgba(26,39,68,·) that every region-D
       surface uses — i.e. the "quiet" text tier failed WCAG AA everywhere it
       actually appears, which is a large share of the audit's 134 rows. This
       is 6.07:1 / 4.69:1 on those same two backgrounds and still reads a full
       step below --color-text-secondary. */
    --color-text-muted: #8592a5;
    --color-text-gold: var(--color-accent-gold);

    /* Status colors */
    --color-success: var(--color-accent-green);
    --color-warning: var(--color-accent-orange);
    --color-danger: var(--color-accent-red);
    --color-info: var(--color-accent-cyan);

    /* =================================================================
       TYPOGRAPHY
       ================================================================= */

    --font-display: 'Orbitron', sans-serif;
    --font-heading: 'Rajdhani', sans-serif;
    --font-body: 'Exo 2', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Font sizes.
       --text-xs (12px at the 16px root) is the FLOOR, not the small end of a
       range: docs/TYPE-LEGIBILITY.md rule 1 puts no rendered text below 12px,
       including uppercase micro-labels, badges, stat keys and timers. Nothing
       under frontend/game/ may set a font-size below this, in any media query.
       Where density is the problem, spend padding or letter-spacing (rule 6). */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* =================================================================
       SPACING
       ================================================================= */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* =================================================================
       LAYOUT
       ================================================================= */

    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;

    /* Header */
    --header-height: 64px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* =================================================================
       EFFECTS
       ================================================================= */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-glow-gold: 0 0 20px rgba(212, 175, 55, 0.3);
    --shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* =================================================================
       Z-INDEX LAYERS — In-game HUD ladder
       One ladder, ten tiers. See docs/HUD-LAYOUT.md §2 for the contract.
       Every fixed-position element under frontend/game/ must use one of
       these ten — no bare literals, no ad-hoc names.
       ================================================================= */

    --z-canvas: 1;              /* .game-fullscreen */
    --z-hud: 100;               /* .game-hud, .top-left-hud, .top-right-hud, .action-buttons-floating */
    --z-panel: 400;             /* .build-menu, tutorial objective card (desktop, region D) */
    --z-highlight: 450;         /* .tutorial-highlight pulse ring */
    --z-notification: 700;      /* .toast-container */
    --z-tutorial-chrome: 1500;  /* .tutorial-overlay, .tutorial-progress, .tutorial-skip-btn */
    --z-flash: 1600;            /* .tutorial-reward-flash */
    --z-modal: 1800;            /* .popup-overlay, .sector-picker-overlay */
    --z-intro: 2000;            /* #intro-overlay */
    --z-intro-top: 2010;        /* intro internal stack: .scanlines, .intro-ai-image, .intro-life-bar, .progress-dots, .skip-btn, .continue-prompt, .final-fade, .overseer-signal (the Overseer's entrance interference) */

    /* Landing-page-only tiers (frontend/css/, NOT frontend/game/). Kept for
       the marketing site's own use. Not part of the ladder above — must not
       be reused by any file under frontend/game/. */
    --z-dropdown: 100;
    --z-sidebar: 200;
    --z-header: 300;
    --z-modal-backdrop: 400;
    --z-tooltip: 600;

    /* =================================================================
       REGION GEOMETRY — one source of truth for how much screen each
       fixed HUD region reserves. docs/HUD-LAYOUT.md §1 names the
       regions; §6 sets the clear-centre floor. This block is what makes
       both checkable instead of guessed.

       Before this existed, every element that had to sit clear of the
       action bar carried its own hand-picked constant:
         .hud-panel / .build-menu   bottom: 92px
         .tutorial-progress         bottom: 100px
         .tutorial-objective (phone) bottom: 0
       …under an action bar whose real footprint is 98px at desktop. The
       92px panel therefore overlapped the bar by 6px at every desktop
       width, and the phone objective strip overlapped it by 48px. Those
       are two of the collisions this pass fixes; they were arithmetic
       errors, not layout errors, so the fix is to stop doing the
       arithmetic by hand.

       Rule: nothing bottom-anchored in the game HUD may hard-code a
       `bottom` value. Derive it from --region-c-reserve (clear of the
       action bar) or --region-d-bottom (the contextual-panel slot).
       ================================================================= */

    /* Notched phones. env() resolves to 0px on hardware without insets,
       and the fallback covers browsers that do not know env() at all. */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);

    /* WCAG 2.5.5 AA minimum, §7. */
    --touch-target: 44px;

    /* Region C (action bar). --region-c-height is asserted against the
       bar's measured height by the layout probe; .action-buttons-floating
       carries it as a min-height so the two cannot silently drift. */
    --region-c-height: 82px;
    --region-c-offset: var(--space-4);
    --region-c-reserve: calc(var(--region-c-offset) + var(--region-c-height) + var(--safe-bottom));

    /* Region A (top-left status) worst-case footprint: 16px anchor +
       profile 42 + 3 + resources 28 + 3 + progression ~42 = ~134px.
       Only used as the ceiling for region D's height. */
    --region-a-reserve: 150px;

    /* Region D (contextual panel: build menu, queues, transmissions,
       structure info, research, expedition — and the tutorial objective
       card, which shares the slot under the §4.1/§4.2 mutual-exclusion
       rule enforced by hudPanels.js). */
    --region-d-gap: 10px;
    --region-d-bottom: calc(var(--region-c-reserve) + var(--region-d-gap));

    /* Height is derived, not capped by a magic number, so a region-D
       panel can never reach into region A or off the top of the screen
       at any viewport height. This subsumes the old
       @media (max-height: 700px) shrink rules in buildMenu.css and
       hudPanels.css (§4.5) — those approximated this formula with two
       constants; the formula is exact at every height. */
    --region-d-max-height: calc(100vh - var(--region-a-reserve) - var(--region-d-bottom) - var(--space-3));
}

/* Mobile browsers shrink the layout viewport as the URL bar retracts;
   100vh keeps the larger value and would let a panel outgrow the screen.
   dvh tracks the live value. Progressive — ignored where unsupported. */
@supports (height: 100dvh) {
    :root {
        --region-d-max-height: calc(100dvh - var(--region-a-reserve) - var(--region-d-bottom) - var(--space-3));
    }
}

/* Tablet (641–1024px, §3): the action bar's four labelled primaries sit
   on 8px padding and the icon cluster is a flat 44px, so region C is one
   44px row plus 8px padding top and bottom. */
@media (max-width: 1024px) {
    :root {
        /* One 44px row + 8px padding top and bottom + 1px border either
           side = 62px measured; 64 leaves the reserve marginally larger
           than the bar, which is the safe direction to be wrong in. */
        --region-c-height: 64px;
        --region-c-offset: var(--space-2);
        --region-a-reserve: 140px;
    }
}

/* Phone (≤640px, §3): region C becomes two 44px rows flush to the bottom
   edge — see the justification in layout.css. 44 + 6 gap + 44 + 8 + 8 =
   110px, plus whatever the safe-area inset adds. */
@media (max-width: 640px) {
    :root {
        /* Two 44px rows + 6px row gap + 8px padding top and bottom + 1px
           top border = 111px measured. */
        --region-c-height: 112px;
        --region-c-offset: 0px;
        --region-a-reserve: 132px;
        --region-d-gap: 8px;
    }
}