:root {
    /* Brand Colors - Sophisticated & Calming Palette */
    --primary-h: 225;
    --primary-s: 40%;
    --primary-l: 55%;
    /* Muted Indigo/Slate */
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-dark: hsl(var(--primary-h), var(--primary-s), 40%);
    --primary-light: hsl(var(--primary-h), var(--primary-s), 94%);

    --accent-h: 180;
    --accent-s: 30%;
    --accent-l: 50%;
    /* Muted Teal */
    --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));

    /* Functional Colors - Muted Variants */
    --success: hsl(150, 35%, 45%);
    --success-light: hsl(150, 35%, 94%);
    --warning: hsl(38, 45%, 58%);
    --warning-light: hsl(38, 45%, 94%);
    --danger: hsl(0, 40%, 58%);
    --danger-light: hsl(0, 40%, 94%);

    /* Neutral Colors / Foregrounds */
    --bg-app: hsl(210, 20%, 98%);
    --bg-surface: hsl(0, 0%, 100%);
    --bg-sidebar: hsl(0, 0%, 100%);

    --text-main: hsl(210, 20%, 20%);
    --text-muted: hsl(210, 10%, 50%);
    --text-light: hsl(210, 10%, 70%);

    /* Spacing & Layout */
    --sidebar-width: 260px;
    --header-height: 70px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;

    /* Shadows - Premium Soft Shadows */
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
    --border-color: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-app: hsl(210, 20%, 8%);
        --bg-surface: hsl(210, 20%, 12%);
        --bg-sidebar: hsl(210, 20%, 10%);

        --text-main: hsl(210, 20%, 95%);
        --text-muted: hsl(210, 10%, 70%);
        --text-light: hsl(210, 10%, 40%);

        --primary-light: hsl(var(--primary-h), var(--primary-s), 18%);

        --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);

        --border-color: rgba(255, 255, 255, 0.08);
        --danger-light: hsl(0, 40%, 18%);
        --success-light: hsl(150, 35%, 18%);
        --warning-light: hsl(38, 45%, 18%);
    }
}