/* CSS Variables - Design Tokens (Brand Guide Color System) */
:root {
    /* Primary Colors - From Brand Guide */
    --light-blue: #D1E5FC;           /* Brand: Light Blue */
    --bright-blue: #8FCCFF;          /* Brand: Bright Blue */
    --medium-blue: #4D7DB8;          /* Brand: Medium Blue */
    --dark-blue: #2D5475;            /* Brand: Dark Blue */
    --medium-green: #639605;         /* Brand: Medium Green */
    --dark-green: #0F590D;           /* Brand: Dark Green */
    --spring-sage: #A3BD6B;          /* Brand: Spring Sage - CTA cards */
    --black: #000000;                /* Brand: Black */
    
    /* Color Aliases - Map to brand colors */
    --sky-blue-light: #D1E5FC;       /* Light Blue - top stripe, light sky */
    --lake-blue: #4D7DB8;            /* Medium Blue - Lake Champlain blue */
    --primary-blue: #4D7DB8;         /* Medium Blue - primary actions */
    --navy-blue: #2D5475;            /* Dark Blue - headers/footer */
    
    /* Extended Green Palette - for gradients and variety */
    --grass-green: #8BC34A;          /* Fresh grass */
    --meadow-green: #76B82A;         /* Vibrant accent */
    --forest-green: #2E7D32;         /* Deep forest */
    --dark-forest: #1B5E20;          /* Darker depth */
    
    --logo-black: #000000;           /* Brand Black */
    
    /* Neutrals - Professional Palette */
    --white: #FFFFFF;
    --off-white: #FAFBFC;
    --bg-light: #F5F7FA;
    --bg-neutral: #EDF1F5;
    --gray-100: #E8ECF0;
    --gray-200: #D1D9E0;
    --gray-300: #B4BFC9;
    --gray-400: #8B98A5;
    --gray-500: #6B7885;
    --gray-600: #4A5568;
    --gray-700: #2D3748;
    --gray-800: #1A202C;
    
    /* Semantic Colors */
    --success: #76B82A;
    --warning: #F59E0B;
    --error: #DC2626;
    --info: #5B8DB8;
    
    /* Text Colors */
    --text-primary: #1A202C;
    --text-secondary: #4A5568;
    --text-tertiary: #6B7885;
    --text-inverse: #FFFFFF;
    --text-link: #4A7BA7;
    
    /* Borders */
    --border-light: #E8ECF0;
    --border-medium: #D1D9E0;
    --border-dark: #B4BFC9;
    
    /* Shadows - Professional Depth */
    --shadow-xs: 0 1px 2px rgba(45, 74, 94, 0.06);
    --shadow-sm: 0 1px 3px rgba(45, 74, 94, 0.08);
    --shadow-md: 0 4px 12px rgba(45, 74, 94, 0.1);
    --shadow-lg: 0 8px 24px rgba(45, 74, 94, 0.12);
    --shadow-xl: 0 12px 32px rgba(45, 74, 94, 0.15);
    
    /* Spacing System (8px base) */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 1rem;      /* 16px */
    --space-md: 1.5rem;    /* 24px */
    --space-lg: 2rem;      /* 32px */
    --space-xl: 3rem;      /* 48px */
    --space-2xl: 4rem;     /* 64px */
    --space-3xl: 6rem;     /* 96px */
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Typography Scale */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.75rem;   /* 60px */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 900;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
}