/* ============================================================================ ANND DESIGN · MEDICAL · Design Tokens (canonical) A fork of ANND Design re-tokened for clinical imaging software. Direction: approachable, calm, trustworthy. Light + Dark. Self-contained: Inter is bundled, never fetched from a CDN. Usage: -> light (default) -> dark -> dark (alias) The system also respects the OS preference automatically (see @media block at the bottom) unless a data-theme is explicitly set. VOICES: THE APP (Inter) · THE MACHINE (mono, every number + measurement). Titles (display) use the same Inter family at heavier weight and tighter tracking. Inter is self-hosted (OFL 1.1): load it once, e.g. @fontsource-variable/inter, before using these tokens. ACCENT = TRUSTWORTHY BLUE: the one interactive hue (primary, active, focus). CLINICAL GRAMMAR: critical (urgent finding) · warning · normal · info. FINDING OVERLAYS: five hemorrhage-subtype colors for the image viewer only, tuned to stay distinct under deutan/protan/tritan simulation at 40-50% alpha over the full brain-window gray range, including bright acute blood. VIEWER: the CT viewing surface is near-black in BOTH themes. ============================================================================ */ :root{ /* ---- voices — Inter for display + app (one family), Plex Mono for data. Inter is self-hosted so it renders identically in every browser and offline; the system sans after it is only a load-failure fallback. */ --display:'Inter Variable',Inter,-apple-system,'Helvetica Neue','Segoe UI',Arial,sans-serif; --app:'Inter Variable',Inter,-apple-system,'Helvetica Neue','Segoe UI',Arial,sans-serif; --machine:'IBM Plex Mono','SFMono-Regular','SF Mono',Menlo,Consolas,monospace; /* ---- plane system — COOL OFF-WHITE (light) ---- field = the room; content cards sit here fill-less. surface = the filled chrome (sidebar + command input). paper = small controls / tags. Planes read by hairline + tone. */ --field:#F2F5F8; --field-2:#E6EAEF; --paper:#F8F9FB; --surface:#FCFDFF; /* ---- ink + structure — ash black, never pure black ---- */ --ink:#262B30; /* primary text — soft charcoal 13.1:1 on field */ --muted:#555C63; /* secondary 6.2:1 on field */ --faint:#6A6F76; /* tertiary / kickers / placeholder 4.6:1 on field */ --rule:#DCE0E5; /* hairline — carries structure */ --rule-strong:#C8CED5; /* emphasis hairline (command edge) */ /* ---- the one interactive accent = TRUSTWORTHY BLUE ---- */ --accent:#286099; /* 6.0:1 on field */ --accent-deep:#114B83; /* hover / pressed */ --accent-tint:rgba(40,96,153,0.08); /* active-nav wash, selection */ --on-accent:#FAFCFE; /* text/icon ON an accent fill — 6.4:1 */ /* ---- clinical status grammar — semantic, scarce ---- */ --critical:#B32E2A; --critical-tint:#FFE9E6; /* urgent finding / destructive */ --warning:#8F5D14; --warning-tint:#FBEFD6; /* needs review / caution */ --normal:#257050; --normal-tint:#E1F4E9; /* normal / negative / complete */ --info:#126E83; --info-tint:#E0F2F7; /* informational / low priority */ /* ---- viewer — the CT canvas. Near-black in BOTH themes ---- */ --viewer:#0A0C0F; --viewer-2:#161A1E; /* toolbars / legends on the viewer */ --viewer-ink:#E2E5E8; /* 15.4:1 on viewer */ --viewer-muted:#9FA5AC; /* 7.9:1 on viewer */ --viewer-rule:rgba(226,229,232,0.14); --viewer-accent:#80B7EB; /* 9.2:1 on viewer */ /* ---- finding overlay palette — hemorrhage subtypes (viewer only) ---- Fill at --finding-alpha over grayscale CT; outline at full opacity. */ --finding-edh:#9BDB82; /* epidural */ --finding-sdh:#E31000; /* subdural */ --finding-sah:#4351F9; /* subarachnoid */ --finding-iph:#FCDE04; /* intraparenchymal */ --finding-ivh:#55C8FF; /* intraventricular */ --finding-alpha:0.45; /* ---- elevation — a whisper; content cards carry NONE ---- */ --lift-1:0 1px 1px rgba(20,32,48,0.04); --lift-2:0 1px 2px rgba(20,32,48,0.05),0 10px 24px -16px rgba(20,32,48,0.18); --lift-accent:0 2px 6px -1px rgba(40,96,153,0.32); /* accent-filled controls */ --lift-rail:none; /* ---- radius — rounder and approachable (circles stay 50%) ---- */ --radius-input:18px; /* command surface */ --radius-card:14px; /* cards, panels */ --radius-control:10px; /* buttons, segmented, control pills */ --radius-nav:10px; /* nav items */ --radius-tag:6px; /* mono status tags / connectors */ --radius-pill:999px; /* example-prompt chips — a true pill */ /* ---- rhythm ---- */ --space-unit:4px; --field-pad:34px 56px 96px; --block-gap:56px; color-scheme:light; } /* ============================================================================ DARK — cool charcoal (never #000). Ink inverts to a soft off-white; the accent lifts to a lighter blue so it reads on dark; the clinical grammar is brightened. The viewer stays the same near-black as in light. ============================================================================ */ :root[data-theme="dark"], .dark{ --field:#111417; --field-2:#1C2024; --paper:#191C20; --surface:#1E2226; --ink:#E5E8EC; /* 15.0:1 on field */ --muted:#A8AFB5; /* 8.3:1 */ --faint:#878D93; /* 5.5:1 */ --rule:rgba(229,232,236,0.12); --rule-strong:rgba(229,232,236,0.20); --accent:#80B7EB; /* 8.7:1 on field */ --accent-deep:#9ECDF9; --accent-tint:rgba(128,183,235,0.12); --on-accent:#0C1723; /* dark ink ON the light-blue fill — 8.5:1 */ --critical:#EF7F74; --critical-tint:rgba(239,127,116,0.16); --warning:#E8B45E; --warning-tint:rgba(232,180,94,0.16); --normal:#6DCA9F; --normal-tint:rgba(109,202,159,0.16); --info:#6FC6DE; --info-tint:rgba(111,198,222,0.16); --lift-1:0 1px 1px rgba(0,0,0,0.30); --lift-2:0 1px 2px rgba(0,0,0,0.40),0 10px 26px -16px rgba(0,0,0,0.55); --lift-accent:0 2px 6px -1px rgba(0,0,0,0.45); --lift-rail:none; color-scheme:dark; } /* Auto-follow the OS preference when no explicit data-theme is set. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ --field:#111417; --field-2:#1C2024; --paper:#191C20; --surface:#1E2226; --ink:#E5E8EC; --muted:#A8AFB5; --faint:#878D93; --rule:rgba(229,232,236,0.12); --rule-strong:rgba(229,232,236,0.20); --accent:#80B7EB; --accent-deep:#9ECDF9; --accent-tint:rgba(128,183,235,0.12); --on-accent:#0C1723; --critical:#EF7F74; --critical-tint:rgba(239,127,116,0.16); --warning:#E8B45E; --warning-tint:rgba(232,180,94,0.16); --normal:#6DCA9F; --normal-tint:rgba(109,202,159,0.16); --info:#6FC6DE; --info-tint:rgba(111,198,222,0.16); --lift-1:0 1px 1px rgba(0,0,0,0.30); --lift-2:0 1px 2px rgba(0,0,0,0.40),0 10px 26px -16px rgba(0,0,0,0.55); --lift-accent:0 2px 6px -1px rgba(0,0,0,0.45); color-scheme:dark; } }