/**
 * Ballistic Edge Theme — variables.css
 * Global design system tokens.
 */

:root {
    /* ── Colors ── */
    --color-orange:       #E8630A;
    --color-orange-dark:  #CC5500;
    --color-black:        #0D0D0D;
    --color-dark-gray:    #1A1A1A;
    --color-mid-gray:     #2A2A2A;
    --color-silver:       #A0A0A0;
    --color-white:        #F5F5F5;
    --color-light-gray:   #E8E8E8;

    /* ── Typography ── */
    /* --font-display uses Bebas Neue (loaded via Google Fonts).
       Fallback chain: Montserrat → Arial Black → system sans.
       font-weight: 800 applies to fallback fonts; Bebas Neue is
       single-weight by design but renders inherently heavy/impactful. */
    --font-display:       'Bebas Neue', 'Montserrat', 'Arial Black', sans-serif;
    --font-heading:       'Rajdhani', 'Montserrat', sans-serif;
    --font-body:          'Inter', system-ui, sans-serif;

    --font-size-hero:     clamp(3rem, 8vw, 7rem);
    --font-size-h1:       clamp(2rem, 4vw, 3.5rem);
    --font-size-h2:       clamp(1.5rem, 3vw, 2.5rem);
    --font-size-body:     clamp(0.9rem, 1.5vw, 1.1rem);
    --font-size-small:    0.875rem;

    /* ── Borders & Shadows ── */
    --border-radius-card: 10px;
    --border-radius-btn:  4px;
    --card-shadow:        0 4px 24px rgba(0, 0, 0, 0.5);
    --card-shadow-hover:  0 8px 40px rgba(232, 99, 10, 0.25);

    /* ── Transitions ── */
    --transition-fast:    200ms ease;
    --transition-mid:     350ms ease;
    --transition-slow:    500ms ease;

    /* ── Layout ── */
    --max-width:          1400px;
    --gutter:             clamp(1rem, 4vw, 3rem);
}

/* ── Light Mode Overrides ── */
body.light-mode {
    --color-black:      #F5F5F5;
    --color-dark-gray:  #FFFFFF;
    --color-mid-gray:   #EBEBEB;
    --color-white:      #1A1A1A;
    --color-silver:     #555555;
}