:root {
    /* Brand — Blue (primary) / Red (accent), per logo */
        --navy-900: #04101F;
        /* deep navy — hero, header, footer */
        --navy-800: #062035;
        --navy-700: #0A3153;
        /* primary blue — nav, links */
        --blue-500: #005EB8;
        /* mid blue — hover states, secondary accents */
        --blue-100: #E4EEF7;
        /* pale blue — tinted panels */
    
        --red-600: #E31B23;
        /* signal red — primary CTA, accents */
        --red-700: #B5161D;
        /* red pressed/hover */
        --red-100: #FBE7E8;
        /* pale red — tags, alerts */

    --paper: #FBFBFA;
    /* page background */
    --steel-100: #EEF2F6;
    /* section background */
    --white: #FFFFFF;

    --slate-900: #14202B;
    --slate-700: #34404D;
    /* body text */
    --slate-500: #5A6772;
    --slate-400: #7C8896;
    /* secondary text */
    --line: #D8DEE4;
    /* hairline rule */
    --line-dark: rgba(255, 255, 255, 0.14);

    /* Type */
    --font-display: "Space Grotesk", "Segoe UI", sans-serif;
    --font-body: "Inter", "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --fs-h1: clamp(2.4rem, 4vw + 1rem, 4.2rem);
    --fs-h2: clamp(1.8rem, 2vw + 1rem, 2.6rem);
    --fs-h3: clamp(1.3rem, 1vw + 1rem, 1.6rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-mono: 0.8125rem;

    /* Spacing scale */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4.5rem;
    --space-7: 7rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --container-max: 1200px;
    --container-wide-max: 1400px;

    --shadow-card: 0 1px 2px rgba(7, 26, 46, 0.06), 0 8px 24px rgba(7, 26, 46, 0.06);
}