:root,
[data-theme="light"] {
    --theme-background: #f4f3ef;
    --theme-surface: #ffffff;
    --theme-surface-elevated: #e9e8e3;
    --theme-text: #101116;
    --theme-text-muted: #676a70;
    --theme-border: #d7d7d3;
    --theme-brand: var(--tenant-brand-light, #d73f20);
    --theme-brand-hover: var(--tenant-brand-light-hover, #b83218);
    --theme-on-brand: var(--tenant-on-brand-light, #ffffff);
    --theme-success: #16794b;
    --theme-warning: #8a5b00;
    --theme-error: #b3261e;
    --theme-focus: #005fcc;
    color-scheme: light;
}

[data-theme="dark"] {
    --theme-background: #080b12;
    --theme-surface: #0e131d;
    --theme-surface-elevated: #151b26;
    --theme-text: #f4f3ee;
    --theme-text-muted: #a8afba;
    --theme-border: #343a45;
    --theme-brand: var(--tenant-brand-dark, #ff6b4a);
    --theme-brand-hover: var(--tenant-brand-dark-hover, #ff896f);
    --theme-on-brand: var(--tenant-on-brand-dark, #101116);
    --theme-success: #5ed39a;
    --theme-warning: #f2be5c;
    --theme-error: #ff766d;
    --theme-focus: #77b7ff;
    color-scheme: dark;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--theme-focus);
    outline-offset: 3px;
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea):focus-visible {
        outline: 3px solid Highlight;
    }
    :where(button, .button, input, select, textarea) {
        border: 1px solid ButtonText;
    }
}

.skip-link {
    position: fixed;
    z-index: 10000;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    transform: translateY(-200%);
    padding: .65rem 1rem;
    background: var(--theme-surface);
    color: var(--theme-text);
    border: 2px solid var(--theme-focus);
}

.skip-link:focus {
    transform: translateY(0);
}