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

    --bg-canvas: #f4f6fb;
    --bg-sidebar: #fbfcff;
    --bg-overlay: rgb(16 24 64 / 48%);
    --surface-primary: #ffffff;
    --surface-secondary: #f7f8fc;
    --surface-elevated: #ffffff;
    --surface-accent: #f0ebff;
    --border-subtle: #e4e8f1;
    --border-strong: #cdd4e3;
    --text-primary: #11183f;
    --text-secondary: #4c587f;
    --text-muted: #7a85a8;
    --text-on-accent: #ffffff;
    --accent-primary: #7048f4;
    --accent-hover: #5f38df;
    --accent-action: #7048f4;
    --accent-action-hover: #5f38df;
    --accent-soft: rgb(112 72 244 / 12%);
    --success: #159a65;
    --warning: #c67b10;
    --danger: #d83a4a;
    --info: #2976d2;
    --focus-ring: rgb(112 72 244 / 34%);
    --shadow-card: 0 8px 24px rgb(33 45 86 / 8%);
    --shadow-overlay: 0 18px 48px rgb(20 28 58 / 18%);
    --input-placeholder: #9aa3bd;

    /* Compatibility aliases while component styles move to semantic tokens. */
    --dark-bg: var(--bg-canvas);
    --dark-surface: var(--surface-primary);
    --dark-surface-elevated: var(--surface-secondary);
    --dark-border: var(--border-subtle);
    --dark-text: var(--text-primary);
    --dark-text-muted: var(--text-muted);
    --dark-accent: var(--accent-primary);
    --dark-accent-hover: var(--accent-hover);
    --dark-link: var(--info);
    --dark-success: var(--success);
    --dark-danger: var(--danger);

    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--bg-canvas);
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-bg: var(--surface-secondary);
    --bs-tertiary-bg: var(--surface-secondary);
    --bs-emphasis-color: var(--text-primary);
    --bs-border-color: var(--border-subtle);
    --bs-link-color: var(--info);
    --bs-link-hover-color: var(--accent-primary);
    --bs-focus-ring-color: var(--focus-ring);
}

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

    --bg-canvas: #171d25;
    --bg-sidebar: #1b222c;
    --bg-overlay: rgb(3 7 13 / 68%);
    --surface-primary: #1e2630;
    --surface-secondary: #232d39;
    --surface-elevated: #293441;
    --surface-accent: #30284d;
    --border-subtle: #34414f;
    --border-strong: #465565;
    --text-primary: #eef2f7;
    --text-secondary: #b8c1ce;
    --text-muted: #8793a5;
    --text-on-accent: #ffffff;
    --accent-primary: #8b62ff;
    --accent-hover: #9d7cff;
    --accent-action: #7048f4;
    --accent-action-hover: #7852e8;
    --accent-soft: rgb(139 98 255 / 16%);
    --success: #48c68d;
    --warning: #e5a343;
    --danger: #f06a76;
    --info: #77adf2;
    --focus-ring: rgb(157 124 255 / 42%);
    --shadow-card: 0 10px 28px rgb(0 0 0 / 18%);
    --shadow-overlay: 0 22px 56px rgb(0 0 0 / 40%);
    --input-placeholder: #667386;

    --dark-bg: var(--bg-canvas);
    --dark-surface: var(--surface-primary);
    --dark-surface-elevated: var(--surface-elevated);
    --dark-border: var(--border-subtle);
    --dark-text: var(--text-primary);
    --dark-text-muted: var(--text-muted);
    --dark-accent: var(--accent-primary);
    --dark-accent-hover: var(--accent-hover);
    --dark-link: var(--info);
    --dark-success: var(--success);
    --dark-danger: var(--danger);

    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--bg-canvas);
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-bg: var(--surface-secondary);
    --bs-tertiary-bg: var(--surface-elevated);
    --bs-emphasis-color: var(--text-primary);
    --bs-border-color: var(--border-subtle);
    --bs-link-color: var(--info);
    --bs-link-hover-color: var(--accent-hover);
    --bs-focus-ring-color: var(--focus-ring);
}

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