:root {
    /* 
     * Brand Colors 
     * Using HSL for easier manipulation/theming 
     */
    --primary-h: 221;
    --primary-s: 83%;
    --primary-l: 53%;
    /* #2563eb - Blue 600 */
    --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-hover: hsl(var(--primary-h), var(--primary-s), 45%);
    --primary-subtle: hsl(var(--primary-h), var(--primary-s), 95%);

    --secondary-h: 215;
    --secondary-s: 16%;
    --secondary-l: 47%;
    /* #64748b - Slate 500 */
    --secondary-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));

    --accent-h: 262;
    --accent-s: 83%;
    --accent-l: 58%;
    /* #8b5cf6 - Violet 500 */
    --accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));

    /* Functional Colors */
    --success-color: #10b981;
    /* Emerald 500 */
    --warning-color: #f59e0b;
    /* Amber 500 */
    --danger-color: #ef4444;
    /* Red 500 */
    --info-color: #06b6d4;
    /* Cyan 500 */

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

    /* Semantic Tokens */
    --bg-body: var(--neutral-50);
    --bg-surface: #ffffff;
    --bg-surface-subtle: var(--neutral-50);

    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-500);
    --text-tertiary: var(--neutral-400);

    --border-color: var(--neutral-200);
    --border-color-hover: var(--neutral-300);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Merriweather', serif;

    /* Spacing */
    --spacing-xs: 0.25rem;
    /* 4px */
    --spacing-sm: 0.5rem;
    /* 8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */

    /* Border Radius */
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-full: 9999px;

    /* Shadows */
    --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);

    /* Transitions */
    --transition-base: all 0.2s ease-in-out;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Support (Future Proofing) */
[data-theme="dark"] {
    --bg-body: var(--neutral-900);
    --bg-surface: var(--neutral-800);
    --bg-surface-subtle: var(--neutral-900);

    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-400);
    --text-tertiary: var(--neutral-500);

    --border-color: var(--neutral-700);
    --border-color-hover: var(--neutral-600);
}