/* ========================================================================== MedSys — design tokens Light is the default. Dark applies via [data-theme="dark"] on . Palette notes, v2: - Paper is a near-neutral with a trace of warmth, not a cool blue-grey. For a site carrying 40,000 words of prose, a blue page tint fights the reader. - The accent is a muted deep blue, not a saturated ultramarine, because the migrated components use it as a large background in dozens of places and a bright fill behind body copy is tiring however good the contrast ratio is. - --grad-to exists because 60+ migrated components fade a gradient to the literal keyword `white`. That is invisible-text-on-white in dark mode. Every one of those stops now resolves through this token instead. - --fill-strong is for the handful of panels carrying reversed white text. It must stay dark in BOTH themes, or white text lands on a light fill. ========================================================================== */ :root{ color-scheme:light; /* surfaces */ --paper:#f6f6f4; --surface:#ffffff; --surface-2:#faf9f7; --surface-3:#f0efec; --grad-to:#ffffff; /* text */ --ink:#14171a; --ink-2:#383d43; --ink-3:#545b63; --ink-4:#656c75; /* structure */ --line:#e2e1dc; --line-2:#c6c4bd; /* accent = interaction, and nothing else */ --ultra:#2b4a7d; --ultra-2:#3f63a5; --ultra-deep:#1e3459; --ultra-pale:#eaeef6; --ultra-line:#c2cfe3; /* Gilt — the "Full guide" chip, and nothing else. * * Deliberately NOT --seg-mid. That gold is spoken for: it is the Borderline * / Moderate rung of the evidence scale, and this site's rule is that colour * encodes meaning and the vocabularies do not mix. A nav chip tinted with * the Borderline colour would read as a verdict on the guide rather than as * emphasis. This one sits deliberately warmer and deeper than #8e6412 so the * two do not look like the same statement. * * If a second use for gilt is ever proposed, that is the moment to stop and * ask what it means, not to reuse it because it is there. */ --gilt:#8a4f04; --gilt-tint:#fdf4e3; --gilt-line:#e0be7e; /* Sprout — the "Essentials" chip, and nothing else. * * A leaf green, chosen to sit about 60° of hue away from BOTH the grade * green (--seg-ok, an emerald at 156°) and the gilt beside it in the row. * Same reasoning as gilt: the evidence scale owns green for Strong/Optimal, * and a depth chip must not borrow it. */ --sprout:#3f6b1e; --sprout-line:#bcd79b; /* reversed-text panels — dark in both themes */ --fill-strong:#26406b; --fill-strong-2:#1c3253; --on-fill:#f4f6fa; --on-fill-dim:#c9d5e8; /* the scale ramp = position on a reference interval, and nothing else */ --ok:#1c6b4f; --ok-bg:#e6f0ea; --seg-ok:#1f7050; --mid:#7d5a10; --mid-bg:#f6efdf; --seg-mid:#8e6412; --hi:#96341f; --hi-bg:#f8ece7; --seg-hi:#ad4530; /* type */ --f-ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --f-read:'Literata',Georgia,'Times New Roman',serif; --f-data:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Reading-text floor. Applies to text made of sentences, not to labels. The dense reference pages carry per-component pixel sizes inherited from the pre-migration stylesheets, and the most repeated of them had drifted to 12.5px against 16px body copy. These two values are the floor; see the READING-TEXT FLOOR block at the foot of legacy-heart.css for what they cover and, more importantly, for what they deliberately do not. Labels — uppercase eyebrows, mono badges, column headers, grade chips, units — keep their own smaller sizes. They are scanned rather than read, they carry the hierarchy on pages with forty components, and they set the width of narrow table columns. Raising them would cost more than it buys. */ --fs-read:14px; --fs-read-sm:12.5px; /* geometry */ --r:5px; --r-sm:3px; --r-lg:8px; --sh-xs:0 1px 2px rgba(20,23,26,.05); --sh-sm:0 1px 4px rgba(20,23,26,.07); --sh:0 2px 12px rgba(20,23,26,.09); --sh-lg:0 10px 34px rgba(20,23,26,.13); } [data-theme="dark"]{ color-scheme:dark; --paper:#131518; --surface:#1a1d21; --surface-2:#21252a; --surface-3:#282d33; --grad-to:#1a1d21; /* Lightened round 92. The secondary and muted greys were reading as washed out on dark backgrounds — ink-3 and ink-4 in particular, which carry the meta lines, table sub-labels and kickers. Raised toward white while keeping enough separation between the four steps to preserve hierarchy. */ --ink:#f7f9fa; --ink-2:#e8ecf0; --ink-3:#d3d9df; --ink-4:#bcc4cc; --line:#2e3338; --line-2:#454c53; --ultra:#9db6e8; --ultra-2:#c3d2f2; --ultra-deep:#7e9bd4; --ultra-pale:#1c2634; --ultra-line:#314054; --gilt:#f0bf6a; --gilt-tint:#2f2410; --gilt-line:#5c4620; --sprout:#9ccb63; --sprout-line:#3f5228; --fill-strong:#22334d; --fill-strong-2:#1a2739; --on-fill:#f0f4fa; --on-fill-dim:#ccd8ea; --ok:#5cd0a0; --ok-bg:#102a20; --seg-ok:#38b98a; --mid:#e5b355; --mid-bg:#2a2109; --seg-mid:#d29a26; --hi:#f79b7e; --hi-bg:#2e1712; --seg-hi:#e88264; --sh-xs:0 1px 2px rgba(0,0,0,.45); --sh-sm:0 1px 4px rgba(0,0,0,.5); --sh:0 2px 12px rgba(0,0,0,.55); --sh-lg:0 10px 34px rgba(0,0,0,.65); } /* ========================================================================== LEGACY BRIDGE — the 33 tokens the original guide's CSS references. Do not add new rules that use these names; new work uses the tokens above. ========================================================================== */ :root,[data-theme="dark"]{ --primary:var(--ultra); --primary-soft:var(--ultra-2); --primary-deep:var(--ultra-deep);--primary-pale:var(--ultra-pale); --cream:var(--paper); --cream-deep:var(--surface-2); --cream-warm:var(--surface-3); --coral:var(--seg-hi); --coral-soft:var(--hi-bg); --coral-deep:var(--hi); --sage:var(--seg-ok); --sage-soft:var(--ok-bg); --sage-deep:var(--ok); --amber:var(--seg-mid); --amber-soft:var(--mid-bg); --amber-deep:var(--mid); --gold:var(--seg-mid); --plum:var(--ultra-2); --plum-soft:var(--ultra-pale); --charcoal:var(--ink); --text-soft:var(--ink-2); --text-faint:var(--ink-3); --border:var(--line); --border-strong:var(--line-2); --shadow-xs:var(--sh-xs); --shadow-sm:var(--sh-sm); --shadow:var(--sh); --shadow-lg:var(--sh-lg); --radius:var(--r-lg); --radius-sm:var(--r-sm); --radius-lg:12px; --font-display:var(--f-ui); --font-body:var(--f-read); }