:root {
    /* Modern HSL Color Palette */
    --primary-h: 221;
    --primary-s: 83%;
    --primary-l: 53%;
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-hover: hsl(var(--primary-h), var(--primary-s), 45%);
    --primary-light: hsl(var(--primary-h), var(--primary-s), 95%);
    
    --secondary-h: 215;
    --secondary-s: 25%;
    --secondary-l: 27%;
    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
    
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Brand-Specific Colors */
    --milo-blue: #2563eb;
    --milo-blue-dark: #1d4ed8;
    --milo-blue-light: #dbeafe;

    --maxim-yellow: #f59e0b;
    --maxim-yellow-dark: #d97706;
    --maxim-yellow-light: #fef3c7;

    --mukurich-green: #10b981;
    --mukurich-green-dark: #059669;
    --mukurich-green-light: #dcfce7;
    
    /* Backgrounds */
    --bg-body: #f1f5f9; /* Slate 100 - consistent with dashboard */
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.85);
    
    /* Typography */
    --text-main: #1e293b;
    --text-muted: #64748b;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
    
    /* Borders & Shadows */
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Spacing & Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
}