:root {
    /* Brand Colors (Premium Blue) */
    --hue-primary: 225;
    --hue-success: 150;
    --hue-warning: 40;
    --hue-error: 350;
    --hue-neutral: 220;

    /* Light Theme (Glassy & Clean) */
    --color-bg: hsl(var(--hue-neutral), 35%, 97%);
    --color-surface: hsl(0, 0%, 100%);
    --color-surface-glass: hsla(0, 0%, 100%, 0.8);
    --color-surface-hover: hsl(var(--hue-neutral), 30%, 96%);

    --color-text-primary: hsl(var(--hue-neutral), 40%, 10%);
    --color-text-secondary: hsl(var(--hue-neutral), 25%, 45%);
    --color-text-muted: hsl(var(--hue-neutral), 20%, 65%);

    /* Primary Actions */
    --color-primary: hsl(var(--hue-primary), 90%, 54%);
    --color-primary-hover: hsl(var(--hue-primary), 90%, 48%);
    --color-primary-active: hsl(var(--hue-primary), 90%, 40%);
    --color-primary-light: hsl(var(--hue-primary), 90%, 96%);
    /* Tint */
    --color-primary-subtle: hsl(var(--hue-primary), 90%, 92%);

    /* Borders & Dividers */
    --color-border: hsl(var(--hue-neutral), 20%, 90%);
    --color-border-hover: hsl(var(--hue-neutral), 20%, 80%);
    --color-divider: hsl(var(--hue-neutral), 20%, 94%);

    /* Functional Colors */
    --color-success: hsl(var(--hue-success), 80%, 40%);
    --color-success-bg: hsl(var(--hue-success), 85%, 96%);

    --color-error: hsl(var(--hue-error), 85%, 55%);
    --color-error-bg: hsl(var(--hue-error), 95%, 97%);

    --color-warning: hsl(var(--hue-warning), 85%, 50%);
    --color-warning-bg: hsl(var(--hue-warning), 90%, 96%);

    --color-highlight: hsl(50, 100%, 85%);

    /* Shadows (Soft & Modern) */
    --shadow-sm: 0 1px 2px 0 rgb(var(--hue-neutral) 20 40 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(var(--hue-neutral) 20 40 / 0.1), 0 2px 4px -2px rgb(var(--hue-neutral) 20 40 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(var(--hue-neutral) 20 40 / 0.1), 0 4px 6px -4px rgb(var(--hue-neutral) 20 40 / 0.05);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

    /* Layout & Metrics */
    --header-height: 72px;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    --font-inter: 'Inter', system-ui, -apple-system, sans-serif;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-theme {
    /* Dark Theme (Deep & Sleek) */
    --color-bg: hsl(var(--hue-neutral), 25%, 8%);
    --color-surface: hsl(var(--hue-neutral), 25%, 12%);
    --color-surface-glass: hsla(var(--hue-neutral), 25%, 12%, 0.85);
    --color-surface-hover: hsl(var(--hue-neutral), 25%, 16%);

    --color-text-primary: hsl(var(--hue-neutral), 10%, 96%);
    --color-text-secondary: hsl(var(--hue-neutral), 15%, 70%);
    --color-text-muted: hsl(var(--hue-neutral), 15%, 50%);

    --color-border: hsl(var(--hue-neutral), 25%, 20%);
    --color-border-hover: hsl(var(--hue-neutral), 25%, 30%);
    --color-divider: hsl(var(--hue-neutral), 25%, 16%);

    --color-primary: hsl(var(--hue-primary), 80%, 65%);
    --color-primary-hover: hsl(var(--hue-primary), 80%, 75%);
    --color-primary-light: hsla(var(--hue-primary), 60%, 20%, 0.5);

    --color-success: hsl(var(--hue-success), 70%, 45%);
    --color-success-bg: hsla(var(--hue-success), 70%, 10%, 0.5);

    --color-error: hsl(var(--hue-error), 80%, 60%);
    --color-error-bg: hsla(var(--hue-error), 80%, 10%, 0.5);

    --color-highlight: #4A3100;

    /* Adjust shadows for dark mode */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* Animations included */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}