:root {
    /* Brand Colors */
    --color-primary: #009EE0;
    --color-primary-hover: #007BB5;
    --color-primary-light: rgba(0, 158, 224, 0.08);
    
    /* Dark Theme / Layout Colors (Carbon Premium) */
    --color-carbon: #121212;
    --color-carbon-light: #1e1e1e;
    --color-carbon-border: #2c2c2c;
    
    /* Backgrounds & Surfaces */
    --color-bg: #f4f7f9;
    --color-surface: #ffffff;
    
    /* Text Colors */
    --color-text-main: #333333;
    --color-text-muted: #6b7280;
    --color-text-light: #ffffff;
    
    /* Borders */
    --color-border: #e5e7eb;
    
    /* Borders & Radius */
    --radius-sm: 4px;
    --radius-md: 8px; /* Softly rounded */
    --radius-lg: 12px;
    
    /* Spacing (Density control) */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    
    /* Shadows & Elevation */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
}