/* Reader-controlled appearances. Semantic roles change; component CSS does not. */
@media (prefers-color-scheme: dark) {
    :root {
        --paper: var(--night-paper);
        --ink: var(--night-ink);
        --ink-deep: var(--night-ink);
        --maroon: var(--night-maroon);
        --pop: var(--night-pop);
        --sepia: var(--night-surface);
        --rust: var(--night-muted);
        --rust-ink: var(--night-muted);
        --ok: var(--night-success);
        --surface-hover: color-mix(in srgb, var(--night-ink) 8%, var(--night-paper));
        --text-on-brand: var(--night-paper);
        --text-on-pastel: var(--night-paper);
        --state-error: var(--night-error);
        --accent: var(--night-pop);
        --accent-hover: color-mix(in srgb, var(--night-pop) 78%, var(--night-paper));
    }

    html, body { background-image: none; }

    .mh-logo,
    .twd-loader__logo { filter: brightness(0) invert(1) sepia(.18); }
}

@media (prefers-contrast: more) {
    :root {
        --border-soft: currentColor;
        --border-subtle: currentColor;
        --border-medium: currentColor;
        --border-strong: currentColor;
        --focus-width: 4px;
    }

    .muted-note { opacity: 1; }
}

@media (forced-colors: active) {
    :root {
        --surface-page: Canvas;
        --text-primary: CanvasText;
        --text-heading: CanvasText;
        --text-muted: CanvasText;
        --text-on-pastel: CanvasText;
        --text-on-brand: ButtonText;
        --maroon: LinkText;
        --pop: Highlight;
        --link-color: LinkText;
        --link-color-hover: LinkText;
        --focus-ring-color: Highlight;
        --border-soft: CanvasText;
        --border-subtle: CanvasText;
        --border-medium: CanvasText;
        --border-strong: CanvasText;
    }

    html, body { background-image: none; }
}