:root {
    /* Brand Color Palette */
    --color-primary: #0d9488;
    --color-primary-light: #2dd4bf;
    --color-primary-dark: #0f766e;
    --color-primary-glow: rgba(45, 212, 191, 0.15);
    
    /* Dark Theme & Surface Colors */
    --color-bg-dark: #090d16;
    --color-bg-dark-card: #0f172a;
    --color-bg-dark-subtle: #1e293b;
    --color-text-dark-heading: #ffffff;
    --color-text-dark-body: #94a3b8;
    --color-text-dark-muted: #64748b;
    
    /* Light Theme & Surface Colors */
    --color-bg-light: #ffffff;
    --color-bg-light-subtle: #f8fafc;
    --color-bg-light-card: #ffffff;
    --color-text-light-heading: #0f172a;
    --color-text-light-body: #334155;
    --color-text-light-muted: #64748b;
    
    /* Border & Divider Colors */
    --color-border-light: #e2e8f0;
    --color-border-subtle: #cbd5e1;
    --color-border-dark: rgba(255, 255, 255, 0.1);
    
    /* Typography */
    --font-heading: 'Valley Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-editorial: 'Newsreader', Georgia, serif;
    
    /* Layout Dimensions */
    --container-max-width: 1240px;
    --header-max-width: 1200px;
    
    /* Transitions & Shadows */
    --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-pill: 0 10px 25px rgba(0, 0, 0, 0.15);
}