html[data-mode="light"] {
    --site-bg: var(--bg-light);
    --site-surface: var(--surface-light);
    --site-surface-alt: var(--surface-alt-light);
    --site-text: var(--text-light);
    --site-muted: var(--muted-light);
    --site-primary: var(--primary-light);
    --site-primary-text: var(--primary-text-light);
    --site-nav: var(--nav-light);
    --site-footer: var(--footer-light);
    --site-border: var(--border-light);
    --site-card: var(--card-light);
    --site-box: var(--box-light);
    --site-shadow: var(--shadow-light);
}

html[data-mode="dark"] {
    --site-bg: var(--bg-dark);
    --site-surface: var(--surface-dark);
    --site-surface-alt: var(--surface-alt-dark);
    --site-text: var(--text-dark);
    --site-muted: var(--muted-dark);
    --site-primary: var(--primary-dark);
    --site-primary-text: var(--primary-text-dark);
    --site-nav: var(--nav-dark);
    --site-footer: var(--footer-dark);
    --site-border: var(--border-dark);
    --site-card: var(--card-dark);
    --site-box: var(--box-dark);
    --site-shadow: var(--shadow-dark);
}

.topbar-shell,
.app-sidebar,
.footer-shell,
.page-hero,
.card-ui {
    background: var(--site-surface);
}