/* ==========================================================================
   Time Mission — Design Tokens
   Single source of truth. Linked from every page.
   ========================================================================== */

:root {
    /* Brand Colors */
    --orange: #FF6B2C;
    --orange-light: #FF8F5C;
    --orange-dark: #E55A1F;
    --cyan: #00E5FF;
    --cyan-dim: #0097a7;
    --magenta: #FF00E5;
    --lime: #AAFF00;
    --green: #22c55e;
    --red: #ef4444;
    --gold: #ffc400;

    /* Neutrals */
    --black: #0D0D0D;
    --dark: #151515;
    --dark-light: #1F1F1F;
    --surface: #1a1a1a;
    --elevated: #242424;
    --border: #2a2a2a;
    --border-bright: #3a3a3a;
    --white: #FFFFFF;
    --white-soft: #E5E5E5;
    --gray: #8A8A8A;
    --gray-light: #a0a0a0;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #f9a41a 0%, #ef4b23 50%, #c7451e 100%);
    --gradient-secondary: linear-gradient(135deg, #00E5FF 0%, #AAFF00 100%);
    --gradient-accent: linear-gradient(90deg, #f9a41a 0%, #ef4b23 50%, #c7451e 100%);

    /* Glows */
    --orange-glow: rgba(255, 107, 44, 0.15);
    --cyan-glow: rgba(0, 229, 255, 0.15);
    --green-glow: rgba(34, 197, 94, 0.15);
    --gold-glow: rgba(255, 196, 0, 0.15);

    /* Typography */
    --display: 'Bebas Neue', sans-serif;
    --body: 'DM Sans', sans-serif;
    --mono: 'DM Sans', sans-serif;
    --tech: 'Monument Extended', 'Orbitron', sans-serif;

    /* Layout rhythm — shared by event-type & long-form marketing sections */
    --space-page-inline: clamp(1.25rem, 4vw, 2rem);
    --space-section-y: clamp(3.25rem, 8vw, 5.5rem);
    --space-section-y-tight: clamp(2.75rem, 6vw, 4.25rem);
    --space-gutter: clamp(1.5rem, 3vw, 2rem);
    --space-gutter-lg: clamp(2rem, 4vw, 3rem);
    --space-after-header: clamp(2rem, 4.5vw, 3rem);
    --space-hero-top: clamp(7rem, 12vw, 10rem);
    --space-hero-bottom: clamp(3rem, 6vw, 4.5rem);

    /* Fixed ticker bar content height (nav offset = this + safe-area-inset-top in nav.css) */
    --tm-ticker-height: 36px;

    /*
     * Responsive breakpoints (conventions across CSS):
     * 1024 — nav hamburger, mobile menu, section texture scroll, location overlay stack
     * 900  — footer grid, event-type splits
     * 768  — footer 1-col, nav compact, FAQ padding, location overlay padding
     * 600  — event hero / CTA stack
     * 400  — ticket panel full viewport width
     */
}

@media (max-width: 768px) {
    :root {
        --tm-ticker-height: 32px;
    }
}