:root {
    /* Premium Color Palette */
    --color-primary: #0f172a; /* Slate 900 */
    --color-primary-light: #1e293b; /* Slate 800 */
    --color-accent: #3b82f6; /* Blue 500 */
    --color-accent-hover: #2563eb; /* Blue 600 */
    --color-background: #f8fafc; /* Slate 50 */
    --color-surface: #ffffff;
    --color-text-main: #0f172a;
    --color-text-muted: #64748b; /* Slate 500 */
    --color-border: #e2e8f0; /* Slate 200 */
    --color-success: #10b981;
    --color-error: #ef4444;

    /* Shadows for Depth */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --glass-background: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.2);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Outfit', sans-serif; /* For headers to give a modern feel */

    /* Spacing & Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --spacing-container: 1200px;
}

/* Dark Mode Support (Opt-in or System) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #f8fafc;
        --color-primary-light: #e2e8f0;
        --color-background: #0f172a;
        --color-surface: #1e293b;
        --color-text-main: #f1f5f9;
        --color-text-muted: #94a3b8;
        --color-border: #334155;
        --glass-background: rgba(15, 23, 42, 0.7);
    }
}