/* ============================================
   DBM WEBSITE - CSS VARIABLES
   All colors, fonts, spacing from Style Guide v1.3
   
   Purpose: Central definitions for all design tokens
   Usage: Reference these variables in other CSS files
   
   Last Updated: November 2025
   ============================================ */

:root {
    /* ============================================
       BRAND COLORS
       Primary colors for logo, headlines, identity
       ============================================ */
    --bronze: #C67420;           /* Logo, H1, H2, brand identity, top bar */
    --charcoal: #2D3748;         /* Navigation text, subheadlines, dark text, footer bg */
    --slate-gray: #4A5568;       /* Body text, captions, metadata */
    
    /* ============================================
       BACKGROUND COLORS
       Main backgrounds and surfaces
       ============================================ */
    --warm-white: #F9F6F2;       /* Alternating section backgrounds, mega menu */
    --pure-white: #FFFFFF;       /* Main sections, cards, header background */
    --light-gray: #F5F5F5;       /* Contact boxes on dark backgrounds, form inputs */
    
    /* ============================================
       CALL-TO-ACTION COLORS
       RESTRICTED USE: CTAs only, not decorative
       
       CONTRAST STRATEGY (Style Guide v1.3):
       - Base state uses DARKER green for better readability (WCAG AA)
       - Hover state uses LIGHTER green for visual "energy boost"
       ============================================ */
    --enterprise-green-base: #027a47;  /* PRIMARY CTAs - DEFAULT state (darker for contrast) */
    --enterprise-green-light: #029659; /* PRIMARY CTAs - HOVER state (lighter for "pop") */
    --material-blue-base: #0a3a7f;     /* Secondary CTAs - DEFAULT state (darker) */
    --material-blue-light: #0D47A1;    /* Secondary CTAs - HOVER state (lighter) */
    
    /* ============================================
       LINK COLORS
       For text links (not buttons)
       ============================================ */
    --link-color: #1a4d2e;       /* Text links, "Learn More" links */
    --link-hover: #133820;       /* Link hover state */
    
    /* ============================================
       TYPOGRAPHY
       Font families
       ============================================ */
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'IBM Plex Sans', sans-serif;
    
    /* ============================================
       SPACING & LAYOUT
       Container and section spacing
       ============================================ */
    --container-max: 1200px;     /* Maximum content width */
    --section-padding-desktop: 80px 60px;  /* Vertical and horizontal padding */
    --section-padding-mobile: 60px 30px;   /* Mobile padding */
    
    /* ============================================
       BORDER RADIUS
       Consistent rounded corners
       ============================================ */
    --radius-sm: 4px;            /* Buttons */
    --radius-md: 8px;            /* Cards */
    --radius-lg: 12px;           /* Video placeholder, feature elements */
    --radius-pill: 20px;         /* "Since 2007" label */
    --radius-circle: 50%;        /* Play button, circular elements */
    
    /* ============================================
       SHADOWS
       Depth and elevation effects
       ============================================ */
    --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-video: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-play: 0 4px 16px rgba(198, 116, 32, 0.3);
    --shadow-green-btn: 0 8px 20px rgba(2, 150, 89, 0.3);
    --shadow-blue-btn: 0 8px 20px rgba(13, 71, 161, 0.3);
}