:root {
    /* Modern Palette (Slate & Sky) - Light Mode Defaults */
    --color-primary: #44aad9;
    /* Sky 500 */
    --color-primary-dark: #053f54;
    /* Sky 600 */
    --color-secondary: #64748b;
    /* Slate 500 */
    --color-success: #10b981;
    /* Emerald 500 */
    --color-accent: #f59e0b;
    /* Amber 500 */

    --color-bg: #f8fafc;
    /* Slate 50 */
    --color-surface: #ffffff;
    /* White */
    --color-surface-glass: rgba(224, 242, 254, 0.9);

    --color-text-main: #0f172a;
    /* Slate 900 */
    --color-text-muted: #475569;
    /* Slate 600 */
    --color-border: #e2e8f0;
    /* 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 -1px rgb(0 0 0 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    --font-heading: 'Outfit', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Legacy Mappings (soft deprecation) */
    --primary: var(--color-primary);
    --nav: var(--color-text-main);
    --lightprimary: #bae6fd;
    --background: var(--color-bg);
    --darkwhite: var(--color-surface);
    --banner: #0f172a;
    /* Dark Slate */
    --bordercolor: var(--color-border);
    --headerfont: var(--font-heading);
    --textfont: var(--font-body);

    --color-surface-variant: #e0f2fe;
    --color-bg-gradient-end: #e0f2fe;

    --color-footer-bg: #e0f2fe;
    --color-footer-text: #0f172a;
    --color-grid: rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
    /* Dark Mode Overrides */
    --color-primary: #38bdf8;
    /* Sky 400 */
    --color-primary-dark: #0ea5e9;
    /* Sky 500 */
    --color-secondary: #94a3b8;
    /* Slate 400 */

    --color-bg: #0f172a;
    /* Slate 900 */
    --color-surface: #1e293b;
    /* Slate 800 */
    --color-surface-variant: #334155;
    /* Slate 700 */
    --color-surface-glass: rgba(30, 41, 59, 0.8);

    --color-text-main: #f8fafc;
    /* Slate 50 */
    --color-text-muted: #94a3b8;
    /* Slate 400 */
    --color-border: #475569;
    /* Slate 600 */
    --color-grid: rgba(255, 255, 255, 0.1);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -1px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -2px rgb(0 0 0 / 0.2);

    --banner: #f8fafc;

    --color-bg-gradient-end: #020617;

    --color-footer-bg: #020617;
    --color-footer-text: #cbd5e1;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary);
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-muted);
}