:root {
    /* Color Palette - Command Style (Default Dark) */
    --color-primary: 217, 91%, 60%;       /* #3b82f6 */
    --color-primary-foreground: 0, 0%, 100%;
    
    --color-background: 224, 71%, 4%;     /* #020617 */
    --color-surface: 222, 47%, 11%;       /* #0f172a */
    --color-surface-elevated: 217, 33%, 17%; /* #1e293b */
    --color-foreground: 210, 40%, 98%;    /* #f8fafc */
    
    --color-muted: 215, 16%, 47%;         /* #64748b */
    --color-muted-foreground: 215, 20%, 65%;
    
    --color-border: 217, 33%, 17%;
    
    --color-success: 142, 71%, 45%;       /* #22c55e */
    --color-warning: 38, 92%, 50%;        /* #f59e0b */
    --color-danger: 0, 84%, 60%;          /* #ef4444 */
    --color-info: 199, 89%, 48%;          /* #0ea5e9 */

    /* Accent Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(217, 91%, 60%), hsl(262, 83%, 58%));
    --gradient-success: linear-gradient(135deg, hsl(142, 71%, 45%), hsl(162, 63%, 41%));
    --gradient-warning: linear-gradient(135deg, hsl(38, 92%, 50%), hsl(25, 95%, 53%));
    --gradient-danger: linear-gradient(135deg, hsl(0, 84%, 60%), hsl(339, 90%, 51%));

    /* Glow */
    --glow-primary: 0 0 20px hsla(217, 91%, 60%, 0.15);
    --glow-success: 0 0 20px hsla(142, 71%, 45%, 0.15);
    --glow-warning: 0 0 20px hsla(38, 92%, 50%, 0.15);

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: light) {
    :root {
        --color-background: 210, 40%, 98%;
        --color-surface: 0, 0%, 100%;
        --color-surface-elevated: 210, 40%, 96%;
        --color-foreground: 222, 47%, 11%;
        --color-border: 214, 32%, 91%;
        --color-muted: 215, 16%, 47%;
        --color-primary: 221, 83%, 53%;
    }
}

[data-theme="dark"] {
    --color-background: 224, 71%, 4%;
    --color-surface: 222, 47%, 11%;
    --color-surface-elevated: 217, 33%, 17%;
    --color-foreground: 210, 40%, 98%;
    --color-border: 217, 33%, 17%;
}

[data-theme="light"] {
    --color-background: 210, 40%, 98%;
    --color-surface: 0, 0%, 100%;
    --color-surface-elevated: 210, 40%, 96%;
    --color-foreground: 222, 47%, 11%;
    --color-border: 214, 32%, 91%;
}