:root {
    /* 
       BRAND COLOR PALETTE - Based on Logo
       Blue: #004E92 | Orange: #FF8C1A
    */
    --color-primary: #004E92;       /* Primary Blue (from logo text) */
    --color-accent: #FF8C1A;        /* Accent Orange (from logo triangle) */
    --color-bg-dark: #001F3F;       /* Dark blue background */
    --color-bg-card: #003366;       /* Card background - lighter blue */
    --color-bg-light: #F8FAFC;      /* Light background */
    
    --color-text-main: #FFFFFF;     /* High contrast white */
    --color-text-dark: #1E293B;     /* Dark text for light backgrounds */
    --color-text-muted: #64748B;    /* Muted text */
    --color-border: #E2E8F0;        /* Light border color */
    --color-border-dark: #1E3A5F;   /* Dark border color */
    
    /* Industrial/Construction accent colors */
    --construction-orange: #FF8C1A; /* Same as accent orange */
    --construction-yellow: #FFC107; /* Bright yellow for hazard stripes */

    /* 
       INDUSTRIAL TYPOGRAPHY
       'Space Grotesk' for that technical/machined look.
       'Manrope' for clean, modern readability.
    */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Manrope', sans-serif;
    
    /* ANIMATION VARIABLES */
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* SPACING & LAYOUT */
    --container-width: 1400px; /* Wider for modern feel */
    --section-gap: 120px;
    --border-radius-sm: 4px;   /* Industrial = sharp or slightly rounded */
    --border-radius-lg: 12px;
    
    /* SHADOWS */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}