/* MONO — dark-mode.css
   Most theming already flows through CSS custom properties in variables.css.
   This file only holds the handful of rules that can't be expressed as a
   simple variable swap. */

[data-theme="dark"] .card,
[data-theme="dark"] .modal-sheet {
    box-shadow: none; /* large soft shadows read as murky on near-black */
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--surface) 25%, #262626 37%, var(--surface) 63%);
    background-size: 400% 100%;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .modal-sheet {
        box-shadow: none;
    }
}

/* Theme-color meta is updated by theme.js; this just keeps the native
   iOS status bar / Android nav bar from flashing white on load. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }