/*
 * Design tokens: the one place the palette lives.
 * Mirrors the Haroon Yamin Portfolio design comp's [data-theme] token system.
 */
:root,
[data-theme="light"] {
    --primary: #2B4AC9;
    --primary-hover: #1F38A3;
    --tint: #EEF1FE;
    --bg: #FAFAF9;
    --surface: #FFFFFF;
    --elevated: #F5F5F4;
    --border: #E7E5E4;
    --text: #1C1B1A;
    --muted: #6B6966;
    --shadow-sm: 0 1px 2px rgba(28, 27, 26, .05), 0 1px 3px rgba(28, 27, 26, .06);
    --shadow-md: 0 2px 4px rgba(28, 27, 26, .04), 0 8px 24px rgba(28, 27, 26, .07);
    --shadow-lg: 0 4px 8px rgba(28, 27, 26, .05), 0 18px 44px rgba(28, 27, 26, .10);
    --header: rgba(255, 255, 255, .82);
    --on-primary: #FFFFFF;
    --font-heading: 'Rubik', system-ui, sans-serif;
    --font-body: 'Rubik', system-ui, sans-serif;
    --font-mono: 'Rubik', ui-monospace, monospace;
}

[data-theme="dark"] {
    --primary: #7B95FF;
    --primary-hover: #9AAEFF;
    --tint: rgba(123, 149, 255, .12);
    --bg: #0E0F12;
    --surface: #16181D;
    --elevated: #1D2026;
    --border: #282C34;
    --text: #ECEDEF;
    --muted: #9AA0AA;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .45);
    --shadow-lg: 0 6px 14px rgba(0, 0, 0, .4), 0 22px 56px rgba(0, 0, 0, .55);
    --header: rgba(22, 24, 29, .78);
    --on-primary: #0E0F12;
}

[data-theme="light"][data-accent="green"] {
    --primary: #146B4C;
    --primary-hover: #0E4E37;
    --tint: #EAF6F0;
}

[data-theme="dark"][data-accent="green"] {
    --primary: #48C79A;
    --primary-hover: #66D6AF;
    --tint: rgba(72, 199, 154, .12);
}

html[data-theme] {
    transition: background-color .35s ease, color .35s ease;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .12s !important;
        scroll-behavior: auto !important;
    }
}