:root {
    /* Colors Core - Premium Red */
    --primary: #ff3b30;
    --primary-rgb: 255, 59, 48;
    --primary-glow: rgba(var(--primary-rgb), 0.5);
    --primary-gradient: linear-gradient(135deg, #ff3b30 0%, #ff2d55 100%);
    
    /* Design Tokens - Premium Satin */
    --satin-blur: blur(20px);
    --satin-bg: rgba(255, 255, 255, 0.05);
    --satin-border: rgba(255, 255, 255, 0.1);
    --satin-shadow: 
        0 10px 30px -10px rgba(0, 0, 0, 0.12),
        0 4px 12px -4px rgba(0, 0, 0, 0.08);
    
    /* Dark Theme (Default) */
    --bg-app: #121213;
    --bg-page: #121213;
    
    /* Panels */
    --panel-dark: #121213;
    --panel-dark-header: #121213;
    --panel-light: #ffffff;
    --panel-light-text: #1c1c1e;
    --panel-light-muted: #8e8e93;
    --panel-light-border: rgba(0, 0, 0, 0.06);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Onboarding Specific - DARK MODE */
    --onboarding-upper-bg: #0d0d0e;
    --onboarding-upper-text: #ffffff;
    --onboarding-upper-muted: rgba(255, 255, 255, 0.6);
    --onboarding-lower-bg: #ffffff;
    --onboarding-lower-text: #1c1c1e;
    --onboarding-lower-input: #f2f2f7;
    --onboarding-lower-muted: #8e8e93;
    --onboarding-lower-border: rgba(0, 0, 0, 0.06);

    /* Fonts */
    --font-cairo: 'Cairo', sans-serif;
    
    /* Layout */
    --panel-radius: 35px;
}

/* Light Mode Overrides */
[data-theme="light"] {
    --bg-page: #f2f2f7;
    --satin-bg: rgba(255, 255, 255, 0.08);
    --satin-border: rgba(255, 255, 255, 0.1);
    --onboarding-upper-bg: #ffffff;
    --onboarding-upper-text: #1c1c1e;
    --onboarding-upper-muted: #636366;
    --onboarding-lower-bg: #121213;
    --onboarding-lower-text: #ffffff;
    --onboarding-lower-input: rgba(255, 255, 255, 0.08);
    --onboarding-lower-muted: #a1a1aa;
    --onboarding-lower-border: rgba(255, 255, 255, 0.1);
}