:root {
    color-scheme: dark;
    --bg-color: #050505;
    --bg-hero: #050505;
    --bg-section: #0f0f0f;
    --bg-card: #242424;
    --bg-card-hover: #2b2b2b;
    --bg-elevated: #202020;
    --bg-input: #373737;
    --bg-overlay: rgba(0,0,0,0.62);
    --bg-modal-overlay: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.46));
    --text-color: #ededed;
    --text-strong: #f8f8f8;
    --text-muted: #cfcfcf;
    --text-subtle: #9a9a9a;
    --text-inverse: #111111;
    --border-color: rgba(255,255,255,0.14);
    --border-soft: rgba(255,255,255,0.1);
    --border-strong: rgba(255,255,255,0.18);
    --accent-color: #8fd3ff;
    --accent-strong: #9fdcff;
    --accent-soft: rgba(143,211,255,0.15);
    --accent-border: rgba(143,211,255,0.3);
    --sidebar-bg: #0f0f0f;
    --sidebar-text: #ffffff;
    --sidebar-muted: #aaaaaa;
    --sidebar-hover: #373737;
    --navbar-bg: transparent;
    --button-bg: transparent;
    --button-hover: rgba(255,255,255,0.08);
    --button-primary-bg: #f2f2f2;
    --button-primary-text: #101010;
    --icon-tile-bg: #f3f6fb;
    --icon-tile-text: #172033;
    --danger-bg: #ef4444;
    --danger-soft: #fca5a5;
    --shadow-soft: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-elevated: 0 22px 60px rgba(0,0,0,0.48);
    --hero-fade: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
    --brand-glow: rgba(108,99,255,0.35);
    --brand-gradient:
        radial-gradient(circle at 25% 30%, #8fd3ff 0%, transparent 50%),
        radial-gradient(circle at 75% 70%, #ff9bd6 0%, transparent 50%),
        linear-gradient(120deg, #6c63ff, #4a3fcf 60%, #2a2f7a);
    --preview-dark-sidebar: #101217;
    --preview-dark-main: #20242c;
    --preview-dark-pill: #303641;
    --preview-dark-card: #161a20;
    --preview-light-bg: #edf3fb;
    --preview-light-sidebar: #dfe8f5;
    --preview-light-main: #ffffff;
    --preview-light-pill: #dfe7f0;
    --preview-light-card: #eef3f8;
    --preview-system-bg: linear-gradient(135deg, #171b22 0 50%, #f2f6fb 50% 100%);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg-color: #f5f7fb;
    --bg-hero: #f5f7fb;
    --bg-section: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f4f9;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;
    --bg-overlay: rgba(15,23,42,0.34);
    --bg-modal-overlay: linear-gradient(to top, rgba(15,23,42,0.38), rgba(15,23,42,0.18));
    --text-color: #172033;
    --text-strong: #0f172a;
    --text-muted: #596579;
    --text-subtle: #7b8798;
    --text-inverse: #ffffff;
    --border-color: rgba(23,32,51,0.14);
    --border-soft: rgba(23,32,51,0.09);
    --border-strong: rgba(23,32,51,0.18);
    --accent-color: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-soft: rgba(37,99,235,0.12);
    --accent-border: rgba(37,99,235,0.28);
    --sidebar-bg: #ffffff;
    --sidebar-text: #172033;
    --sidebar-muted: #6b7280;
    --sidebar-hover: #eef3f9;
    --navbar-bg: rgba(245,247,251,0.82);
    --button-bg: transparent;
    --button-hover: #f1f1f1;
    --button-primary-bg: #172033;
    --button-primary-text: #ffffff;
    --icon-tile-bg: #e8f1ff;
    --icon-tile-text: #1d4ed8;
    --danger-bg: #ef4444;
    --danger-soft: #fecaca;
    --shadow-soft: 0 12px 32px rgba(31,41,55,0.12);
    --shadow-elevated: 0 24px 70px rgba(31,41,55,0.18);
    --hero-fade: linear-gradient(to top, rgba(245,247,251,0.95), rgba(245,247,251,0));
    --brand-glow: rgba(37,99,235,0.22);
    --brand-gradient:
        radial-gradient(circle at 25% 30%, #38bdf8 0%, transparent 50%),
        radial-gradient(circle at 78% 65%, #f472b6 0%, transparent 50%),
        linear-gradient(120deg, #2563eb, #7c3aed 58%, #0f766e);
    --preview-dark-sidebar: #101217;
    --preview-dark-main: #20242c;
    --preview-dark-pill: #303641;
    --preview-dark-card: #161a20;
    --preview-light-bg: #edf3fb;
    --preview-light-sidebar: #dfe8f5;
    --preview-light-main: #ffffff;
    --preview-light-pill: #dfe7f0;
    --preview-light-card: #eef3f8;
    --preview-system-bg: linear-gradient(135deg, #171b22 0 50%, #f2f6fb 50% 100%);
}

* {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 180ms;
    transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}