/* ============================================================ MEDSY — THEMES & DENSITY Dark theme ("night ward"), OLED ("lights out") and density modes. All are opt-in attributes on (or any subtree): … full dark theme … dark, on true black — OLED displays … tighter spacing for data-heavy UI The dark theme re-tunes — never inverts: forest brightens into a mint-leaning accent, hairlines & tints go translucent-mint, pastel spark chips stay light (they read as highlights), and shadows drop the green tint for true depth on dark. ============================================================ */ :root{ --surface-inverse:var(--ink); /* toasts, tooltips, ink pills */ --text-on-inverse:#FFFFFF; } [data-theme="dark"],[data-theme="oled"]{ color-scheme:dark; /* canvas & surfaces */ --bg:#0B1712; --surface:#0F1D16; --surface-card:#12211B; --surface-mist:#0D1A14; --surface-soft:#123024; --mist:#152A21; /* text */ --ink:#DEEAE4; --ink-soft:#AEC3B8; --ink-faint:#8AA396; --text-strong:#F2FAF6; --text-brand:#6FE3B0; /* accents — forest brightens to stay legible on dark */ --forest:#3BC98F; --forest-700:#57D8A6; --forest-400:#5FC496; --forest-300:#39775C; --forest-rgb:95,232,177; /* @kind other */ /* mint tints become deep-green surface tints */ --mint-50:#10241B; --mint-100:#153226; --mint-200:#1C4531; /* hairlines */ --line:rgba(95,232,177,.17); --line-soft:rgba(95,232,177,.09); --line-mint:rgba(95,232,177,.32); /* status */ --danger:#F3595E; --danger-soft:#3B1A17; --danger-ink:#FFA39C; --danger-line:rgba(243,89,94,.42); /* focus & selection */ --focus-ring:rgba(95,232,177,.3); /* gradients — only the light-based ones flip */ --grad-soft:linear-gradient(160deg,#132A20 0%,#0F1D16 70%); /* @kind color */ /* on dark, bright mint is the high-contrast end — take the cap off */ --grad-text:linear-gradient(135deg,#57D8A6 0%,#7CE9BF 52%,#A6F2D6 100%); /* @kind color */ /* shadows — true black depth (green-tinted shadows vanish on dark) */ --shadow-xs:0 1px 3px rgba(0,0,0,.42); --shadow-sm:0 4px 14px -6px rgba(0,0,0,.5); --shadow-md:0 16px 38px -14px rgba(0,0,0,.58); --shadow-lg:0 36px 70px -26px rgba(0,0,0,.66); --shadow-mint:0 18px 44px -16px rgba(95,232,177,.22); /* re-declare alias chains so substitution happens INSIDE this scope — without these, subtree theming (data-theme on a div) would freeze the light values that :root already substituted into the aliases */ --text-body:var(--ink); --text-muted:var(--ink-soft); --text-faint:var(--ink-faint); --border:var(--line); --border-soft:var(--line-soft); --surface-glass:rgba(18,33,27,.72); /* a white rim on a dark glass panel reads as a bright scratch; and a full-white shimmer over dark mist glares. Both drop to a mint-tinted whisper. */ --glass-rim:rgba(95,232,177,.16); --shimmer:rgba(174,195,184,.14); /* ink on the (now bright) forest fill goes dark */ --on-brand:#07130D; /* inverse surfaces flip light */ --surface-inverse:#E7F4ED; --text-on-inverse:#0B1712; } /* ---- OLED — same night-ward accents on a true-black canvas. Surfaces keep a whisper of green so cards still separate; hairlines carry more of the depth (shadows disappear on #000). Perfect blacks, battery-friendly, 2026-native. */ [data-theme="oled"]{ --bg:#000000; --surface:#070D0A; --surface-card:#0A130E; --surface-mist:#050908; --surface-soft:#0C2118; --mist:#0E1D16; --mint-50:#0A1B14; --mint-100:#10271D; --line:rgba(95,232,177,.2); --line-soft:rgba(95,232,177,.11); --shadow-xs:0 1px 3px rgba(0,0,0,.6); --shadow-sm:0 4px 14px -6px rgba(0,0,0,.7); --shadow-md:0 16px 38px -14px rgba(0,0,0,.8); --shadow-lg:0 36px 70px -26px rgba(0,0,0,.85); } /* ---- dark: bright-fill indicators take dark glyphs (forest is now bright) ---- */ :is([data-theme="dark"],[data-theme="oled"]) .box svg{color:#07130D} :is([data-theme="dark"],[data-theme="oled"]) .radio .box::after{background:#07130D} :is([data-theme="dark"],[data-theme="oled"]) .v-selectcard-mark .v-icon{color:#07130D} :is([data-theme="dark"],[data-theme="oled"]) .v-ms-box .v-icon{color:#07130D} :is([data-theme="dark"],[data-theme="oled"]) .mcq-option.is-correct .mcq-key{color:#07130D} :is([data-theme="dark"],[data-theme="oled"]) .pill-forest{color:#07130D} :is([data-theme="dark"],[data-theme="oled"]) .step.done .num{color:#07130D} :is([data-theme="dark"],[data-theme="oled"]) .dgm-swim-num{color:#07130D} :is([data-theme="dark"],[data-theme="oled"]) .dgm-node.is-start .dgm-swim-num, :is([data-theme="dark"],[data-theme="oled"]) .dgm-node.is-end .dgm-swim-num{color:#0F6844} /* every remaining white-on-forest glyph: forest is a bright mint here, so white drops to ~2:1. These all take the dark on-brand ink instead. */ :is([data-theme="dark"],[data-theme="oled"]) .avatar, :is([data-theme="dark"],[data-theme="oled"]) .v-avg-more, :is([data-theme="dark"],[data-theme="oled"]) .v-nc-badge, :is([data-theme="dark"],[data-theme="oled"]) .v-dp-day.sel, :is([data-theme="dark"],[data-theme="oled"]) .v-bar-val, :is([data-theme="dark"],[data-theme="oled"]) .v-hbar-val, :is([data-theme="dark"],[data-theme="oled"]) .v-copy-btn.ok{color:var(--on-brand)} /* tone-mint sits on the dark mint-100 surface tint here, so its ink goes light */ :is([data-theme="dark"],[data-theme="oled"]) .v-announce.tone-mint{color:var(--text-strong)} /* (.v-announce.tone-mint .v-announce-cta now takes --on-brand directly) */ /* ---- dark: pastel-spark surfaces stay light (they read as highlights), so the ink printed on them must stay dark — the themed body ink would vanish ---- */ :is([data-theme="dark"],[data-theme="oled"]) .callout.tone-info, :is([data-theme="dark"],[data-theme="oled"]) .callout.tone-warn, :is([data-theme="dark"],[data-theme="oled"]) .callout.tone-info .callout-body, :is([data-theme="dark"],[data-theme="oled"]) .callout.tone-warn .callout-body, :is([data-theme="dark"],[data-theme="oled"]) .callout.tone-info .callout-body > p, :is([data-theme="dark"],[data-theme="oled"]) .callout.tone-warn .callout-body > p{color:#1c2a24} /* ---- dark: translucent-white surfaces re-tuned ---- */ :is([data-theme="dark"],[data-theme="oled"]) .card-glass{background:rgba(16,30,24,.55);border-color:rgba(95,232,177,.14)} :is([data-theme="dark"],[data-theme="oled"]) .flashcard-tag{background:rgba(11,23,18,.72)} :is([data-theme="dark"],[data-theme="oled"]) .btn-dark{box-shadow:0 1px 1.5px rgba(0,0,0,.4),0 6px 16px -6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08)} /* ============================================================ DENSITY — data-density="compact" Tighter rhythm for dashboards, tables and admin surfaces. Type drops 17→16px, the spacing scale compresses one notch, and high-frequency controls tuck in. Reading surfaces (prose, learning) intentionally do not compress. ============================================================ */ [data-density="compact"]{ --fs-body:1rem; --s-3:10px;--s-4:14px;--s-5:20px;--s-6:26px;--s-7:38px;--s-8:52px; } [data-density="compact"] .btn{padding:.62em 1.3em;font-size:.92rem} [data-density="compact"] .btn-lg{font-size:1rem;padding:.8em 1.6em} [data-density="compact"] .input, [data-density="compact"] .textarea, [data-density="compact"] .select{padding:1rem .9rem .42rem} [data-density="compact"] .card{padding:1.3rem} [data-density="compact"] table.table th, [data-density="compact"] table.table td{padding:.55rem .9rem} [data-density="compact"] .menu-item{padding:7px 10px} [data-density="compact"] .acc-head{padding:.85rem 1rem} [data-density="compact"] .tab-btn{padding:.5rem} [data-density="compact"] .tab-panels{padding:1.1rem} [data-density="compact"] .pg{min-width:32px;height:32px} [data-density="compact"] .v-selectcard{padding:12px 14px} [data-density="compact"] .kpi,[data-density="compact"] .v-statgrid-cell{padding:16px} /* ============================================================ PREFERS-REDUCED-TRANSPARENCY Honour the OS "reduce transparency" setting (macOS/iOS/Windows). The glass surfaces and blurred scrims go fully solid — separation is kept with a heavier fill + hairline, never a blur. Declared here (the last-imported sheet) so it wins the cascade over the component and guidance rules that set the blur. Sits beside reduced-motion, prefers-contrast and forced-colors: one system, every preference. ============================================================ */ /* ============================================================ PREFERS-CONTRAST IN THE DARK SCOPES base.css raises the hairlines and muted ink for prefers-contrast:more, but it does so on :root — and this sheet (imported last) re-declares the same tokens inside [data-theme="dark"] at equal specificity, so the light-theme override won every time and the preference did NOTHING in dark or OLED. Re-assert it here, in the scope that wins. Scope test for any new preference block: does it override a TOKEN that a theme scope also declares? Then it belongs here. Does it override a PROPERTY under a component selector (transition:none, animation:none, border-width)? Then it belongs beside that component, and the ~25 prefers-reduced-motion blocks throughout the component sheets are correctly placed. ============================================================ */ @media (prefers-contrast: more){ [data-theme="dark"],[data-theme="oled"]{ --line:rgba(95,232,177,.42); --line-soft:rgba(95,232,177,.24); --line-mint:rgba(95,232,177,.6); --ink-soft:#C6D9CF; --ink-faint:#A9C1B5; } /* Mirrors base.css's list EXACTLY — same five tokens. If you add one there, add it here. The border-width bump is not repeated: it is a property on component selectors, which no theme scope re-declares, so base.css's rule already applies on dark. */ } @media (prefers-reduced-transparency: reduce){ .card-glass{background:var(--surface-card);border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none} :is([data-theme="dark"],[data-theme="oled"]) .card-glass{background:var(--surface-card);border-color:var(--line)} .scrim,.gd-tour-scrim{background:rgba(6,58,40,.66);-webkit-backdrop-filter:none;backdrop-filter:none} }