:root,
html[data-theme='light'] {
    color-scheme: light;
    --color-bg: #ffffff;
    --color-fg: #1f1335;
    --color-fg-muted: #5b4a76;
    --color-surface: #ffffff;
    --color-surface-elevated: #f7f3ff;
    --color-border: #eadfff;
    --color-accent: #7c3aed;
    --color-accent-fg: #ffffff;
    --color-ring: #7c3aed;
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-warning: #d97706;
    --color-info: #0284c7;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --shadow-xs: 0 1px 2px rgba(31, 19, 53, 0.05);
    --shadow-sm: 0 8px 24px rgba(31, 19, 53, 0.06);
    --shadow-md: 0 16px 40px rgba(31, 19, 53, 0.1);
    --shadow-lg: 0 24px 60px rgba(31, 19, 53, 0.14);
    --shadow-ring: 0 0 0 3px rgba(124, 58, 237, 0.18);

    /* Bootstrap variable bridge */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-fg);
    --bs-secondary-bg: var(--color-surface-elevated);
    --bs-tertiary-bg: var(--color-surface-elevated);
    --bs-border-color: var(--color-border);
    --bs-emphasis-color: var(--color-fg);
}

html[data-theme='dark'] {
    color-scheme: dark;
    --color-bg: #160d29;
    --color-fg: #f5eeff;
    --color-fg-muted: #cbb8eb;
    --color-surface: #22163a;
    --color-surface-elevated: #2d1e4c;
    --color-border: #4a3372;
    --color-accent: #7c3aed;
    --color-accent-fg: #ffffff;
    --color-ring: #a78bfa;
    --color-success: #22c55e;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #38bdf8;
    --shadow-xs: 0 1px 2px rgba(10, 6, 18, 0.35);
    --shadow-sm: 0 8px 24px rgba(10, 6, 18, 0.28);
    --shadow-md: 0 16px 40px rgba(10, 6, 18, 0.32);
    --shadow-lg: 0 24px 60px rgba(10, 6, 18, 0.38);
    --shadow-ring: 0 0 0 3px rgba(167, 139, 250, 0.18);

    /* Bootstrap variable bridge */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-fg);
    --bs-secondary-bg: var(--color-surface-elevated);
    --bs-tertiary-bg: var(--color-surface-elevated);
    --bs-border-color: var(--color-border);
    --bs-emphasis-color: var(--color-fg);
}