:root {
    /* --- HSL Color System --- */
    /* Primary: Indigo/Violet Vibe */
    --primary-h: 245;
    --primary-s: 85%;
    --primary-l: 60%;
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-light: hsl(var(--primary-h), var(--primary-s), 75%);
    --primary-dark: hsl(var(--primary-h), var(--primary-s), 45%);

    /* Secondary: Emerald/Teal (Growth/Money) */
    --secondary-h: 150;
    --secondary-s: 80%;
    --secondary-l: 45%;
    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));

    /* Neutral Scale (Slate) */
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* Backgrounds */
    --bg-page: var(--slate-50);
    --bg-surface: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.7);

    /* Text */
    --text-main: var(--slate-900);
    --text-muted: var(--slate-500);
    --text-light: #ffffff;

    /* Borders & Shadows */
    --border: var(--slate-200);
    --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);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

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

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-surface: linear-gradient(to bottom right, #ffffff, var(--slate-50));
    --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 100%);
}

/* Dark Mode Support (Future-proof) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-page: #0f172a;
        --bg-surface: #1e293b;
        --bg-glass: rgba(30, 41, 59, 0.7);

        --text-main: #f8fafc;
        --text-muted: #94a3b8;

        --border: #334155;

        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);

        --gradient-surface: linear-gradient(to bottom right, #1e293b, #0f172a);
    }
}