:root {
    --font-ui: "Avenir Next", "SF Pro Display", "Helvetica Neue", sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --background: #060b14;
    --text: #f7f9fc;
    --text-secondary: #a7b6c8;
    --muted: #74869a;
    --focus: #6bc8ff;

    --glass-background: rgba(255, 255, 255, 0.048);
    --glass-background-strong: rgba(255, 255, 255, 0.068);
    --glass-border: rgba(132, 204, 255, 0.145);
    --glass-border-hover: rgba(137, 211, 255, 0.25);
    --glass-border-inner: rgba(255, 255, 255, 0.035);
    --glass-shadow: 0 26px 72px rgba(0, 0, 0, 0.42), 0 3px 12px rgba(0, 0, 0, 0.20);

    --surface-hover: rgba(74, 170, 255, 0.075);
    --nav-active: rgba(72, 166, 255, 0.12);
    --control-bg: rgba(255, 255, 255, 0.052);
    --control-hover: rgba(83, 178, 255, 0.105);
    --inner-surface: rgba(89, 181, 255, 0.028);
    --inner-border: rgba(115, 195, 255, 0.065);
    --divider: rgba(117, 194, 255, 0.085);
    --chip-bg: rgba(82, 175, 255, 0.055);
    --chip-border: rgba(117, 194, 255, 0.095);

    --accent: #67c7ff;
    --accent-soft: rgba(89, 184, 255, 0.145);
    --accent-ring: rgba(89, 184, 255, 0.34);
    --accent-glow: rgba(65, 166, 255, 0.15);
    --positive: #5fd396;
    --button-shadow: rgba(0, 0, 0, 0.28);

    --ambient-1: rgba(24, 121, 225, 0.16);
    --ambient-2: rgba(78, 83, 210, 0.085);
    --ambient-3: rgba(52, 176, 245, 0.065);

    --radius-md: 18px;
    --radius-lg: 26px;

    --transition-fast: 140ms ease;
    --transition-base: 180ms ease;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --background: #060b14;
        --text: #f7f9fc;
        --text-secondary: #a7b6c8;
        --muted: #74869a;
        --focus: #6bc8ff;

        --glass-background: rgba(255, 255, 255, 0.048);
        --glass-background-strong: rgba(255, 255, 255, 0.068);
        --glass-border: rgba(132, 204, 255, 0.145);
        --glass-border-hover: rgba(137, 211, 255, 0.25);
        --glass-border-inner: rgba(255, 255, 255, 0.035);
        --glass-shadow: 0 26px 72px rgba(0, 0, 0, 0.42), 0 3px 12px rgba(0, 0, 0, 0.20);

        --surface-hover: rgba(74, 170, 255, 0.075);
        --nav-active: rgba(72, 166, 255, 0.12);
        --control-bg: rgba(255, 255, 255, 0.052);
        --control-hover: rgba(83, 178, 255, 0.105);
        --inner-surface: rgba(89, 181, 255, 0.028);
        --inner-border: rgba(115, 195, 255, 0.065);
        --divider: rgba(117, 194, 255, 0.085);
        --chip-bg: rgba(82, 175, 255, 0.055);
        --chip-border: rgba(117, 194, 255, 0.095);

        --accent: #67c7ff;
        --accent-soft: rgba(89, 184, 255, 0.145);
        --accent-ring: rgba(89, 184, 255, 0.34);
        --accent-glow: rgba(65, 166, 255, 0.15);
        --positive: #5fd396;
        --button-shadow: rgba(0, 0, 0, 0.28);

        --ambient-1: rgba(24, 121, 225, 0.16);
        --ambient-2: rgba(78, 83, 210, 0.085);
        --ambient-3: rgba(52, 176, 245, 0.065);
    }
}

[data-theme="light"] { color-scheme: light; }

[data-theme="dark"] {
    color-scheme: dark;
    --background: #060b14;
    --text: #f7f9fc;
    --text-secondary: #a7b6c8;
    --muted: #74869a;
    --focus: #6bc8ff;

    --glass-background: rgba(255, 255, 255, 0.048);
    --glass-background-strong: rgba(255, 255, 255, 0.068);
    --glass-border: rgba(132, 204, 255, 0.145);
    --glass-border-hover: rgba(137, 211, 255, 0.25);
    --glass-border-inner: rgba(255, 255, 255, 0.035);
    --glass-shadow: 0 26px 72px rgba(0, 0, 0, 0.42), 0 3px 12px rgba(0, 0, 0, 0.20);

    --surface-hover: rgba(74, 170, 255, 0.075);
    --nav-active: rgba(72, 166, 255, 0.12);
    --control-bg: rgba(255, 255, 255, 0.052);
    --control-hover: rgba(83, 178, 255, 0.105);
    --inner-surface: rgba(89, 181, 255, 0.028);
    --inner-border: rgba(115, 195, 255, 0.065);
    --divider: rgba(117, 194, 255, 0.085);
    --chip-bg: rgba(82, 175, 255, 0.055);
    --chip-border: rgba(117, 194, 255, 0.095);

    --accent: #67c7ff;
    --accent-soft: rgba(89, 184, 255, 0.145);
    --accent-ring: rgba(89, 184, 255, 0.34);
    --accent-glow: rgba(65, 166, 255, 0.15);
    --positive: #5fd396;
    --button-shadow: rgba(0, 0, 0, 0.28);

    --ambient-1: rgba(24, 121, 225, 0.16);
    --ambient-2: rgba(78, 83, 210, 0.085);
    --ambient-3: rgba(52, 176, 245, 0.065);
}

html, body, .glass, .primary-button, .icon-button, .nav-item {
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
    html, body, .glass, .primary-button, .icon-button, .nav-item { transition: none; }
}