/* ============================================================================ One Portal design tokens ---------------------------------------------------------------------------- Light theme lives on :root. Dark theme overrides the same names under :root[data-theme="dark"] — component CSS never branches on theme, it just references a token and gets the right value. 2026-08-11: reconciled the brand-guide-accurate color pass (surface/accent/ danger/info values below, with brand guide page citations) back into the full structural token set (surfaces, borders, tints, shadows, chart colors, on-accent/on-surface pairs) that pass had dropped — every one of those structural tokens is still referenced throughout the app's CSS. See Rules/design-system.md for the color-role writeup this backs. ========================================================================== */ :root { /* ---------- Brand-fixed (identical in both themes — brand-reference colors, not interactive states that need a dark-mode contrast lift) ---------- */ /* Dark Blue — brand guide p23, secondary color. Brand/marketing chrome only: the sign-in gateway backdrop, a marketing splash. 2026-08-11: this was briefly promoted to the persistent in-app nav shell (sidebar/top bar) too, but that made every nav link/icon/avatar sitting on it need its own on-surface treatment and still ended up illegible — reverted. The nav shell is back to a light/white fill (see --color-surface-rail/ -header below); this token is back to marketing-chrome-only, as before. */ --color-surface-navy: #000F29; /* LFZ Navy — brand guide p23, the actual primary color (not the earlier Figma-sampled approximation). Used for Medical's chart fills specifically because it's brand identity, not an interactive control — --color-accent below carries the same hex in light mode but lightens in dark mode for contrast, which chart fills should NOT do. */ --color-lfz-navy: #001A4F; /* True LFZ Scarlet, confirmed against the official brand guide (p23, independently corroborated at #F41F00 — effectively the same red sampled twice). The public marketing site (lfz.com) uses this as its primary CTA color; OnePortal itself never does (see the Exception note in design-system.md) — kept here only so the correct hex lives in one place. Do not "correct" this to #E89300 — that's a mis-sampled amber from the same guide's own tint chart, not a truer value. */ --color-lfz-scarlet: #F51F00; /* ---------- Accent / primary interactive — the one "clickable" color. Base is LFZ Navy per the brand guide (p23); hover/active use the brand guide's own documented tint-chart steps (p24) — not computed math, not the earlier Figma-exploration values. Hover is lighter than rest; active is lighter than rest but darker than hover (stays visibly "engaged" on press rather than snapping back toward rest). ---------- */ --color-accent: #001A4F; /* 2026-08-11: was #002269 (a brand-guide tint-chart step); Temitope asked for CTA-button hover specifically to use #002B82 instead — previously recorded as an "available, unassigned" extra tint step (see --color-accent-tint-bright below), now assigned to this role. */ --color-accent-hover: #002B82; --color-accent-active: #001F57; --color-accent-tint: rgba(0,26,79,.08); --color-accent-tint-strong: rgba(0,26,79,.14); /* Two further tint-chart steps (p24), available for subtle fills, borders, or disabled states. --color-accent-tint-dark isn't currently assigned to a component; --color-accent-tint-bright happens to share its hex with --color-accent-hover above (same brand-guide step, now double-booked as both "the extra tint step" and "CTA hover") — that's fine, just don't let the two drift to different values later without noticing they were once the same. Do not reuse either as a structural/accent base color; an earlier draft did that before the brand guide's own tint chart was read correctly. */ --color-accent-tint-dark: #001241; --color-accent-tint-bright: #002B82; /* Accent used as a FOREGROUND — text/icon/border/outline/ring color sitting directly on a page surface (rail, canvas, card…), as opposed to a FILL (a button/badge background with --color-on-accent text on top, which stays legible regardless of theme since on-accent tracks it). Same as --color-accent in light mode; only diverges in dark mode — see the dark block below. */ --color-accent-fg: var(--color-accent); /* ---------- Danger — destructive/error only, never a second primary. #F51F00 is the true brand scarlet (see --color-lfz-scarlet above); the earlier accessibility-darkened #BD1800 is retired by explicit decision — the brightness concern no longer applies. Danger darkens on interaction (hover/active both darker than rest) — the reverse direction from accent, which is intentional: different colors playing different roles. ---------- */ --color-danger: #F51F00; --color-danger-hover: #AB1F00; --color-danger-active: #740000; --color-danger-tint: rgba(245,31,0,.10); /* ---------- Semantic status ---------- */ --color-success: #1D8A5A; --color-warning: #B7791F; --color-info-bg: #D6DEE9; --color-info-text: #001A4F; --color-success-tint: rgba(29,138,90,.12); --color-warning-tint: rgba(183,121,31,.14); /* ---------- Secondary (from the print brand guide) ---------- */ --color-salmon: #FCC5BD; --color-grey: #696969; --color-grey-light: #AFAFAF; /* Chart accents — a dedicated dark/light blue duo for data visualizations that need two (or three, paired with --color-accent) clearly distinct blues in a single view, since --color-accent/-hover/-active all cluster in the dark-navy range and don't give that contrast on their own. */ --color-chart-blue-dark: #1E3A8A; --color-chart-blue-light: #93C5FD; /* A lighter grey for chart-only use — --color-grey-light isn't safe here since its dark-theme value is tuned darker (for disabled/muted UI), the opposite of what a chart segment needs on a dark surface. */ --color-chart-grey-light: #AFAFAF; /* "Vivid" variants of the two above, scoped to Medical Enterprise Admin's 4-series Weekly Trends chart and Employee Status pie only (2026-08-11) — --color-chart-blue-light/-grey-light are shared with e-Service/VMS/ Regulatory's own charts, so this pair exists instead of editing those shared tokens. -grey-vivid's light-theme value is still an unchanged copy of -grey-light. -blue-vivid's light-theme value was originally a copy of -blue-light too (#93C5FD) but read as pale/washed-out "powder blue" there as well, so it's now the same saturated #2B76FF used in dark mode (see below) in both themes. */ --color-chart-blue-vivid: #2B76FF; --color-chart-grey-vivid: #AFAFAF; /* "Upcoming" appointment status (Scheduled) — split off from the shared --color-info-bg/-text (used broadly elsewhere: banners, hover states, the auth eyebrow badge) so this dark-mode-specific fix doesn't ripple into any of that. Light-theme values are plain copies of the current info-bg/-text look. */ --color-upcoming: #001A4F; --color-upcoming-tint: #D6DEE9; /* ---------- Surfaces ---------- A five-step ladder from the deepest chrome to a lifted card. In light mode the chrome is white and only the canvas recedes; dark mode gives each layer its own step. Always use these instead of a literal #fff. */ --color-surface-rail: #fff; /* 1 · sidebar */ --color-surface-header: #fff; /* 2 · top bar */ --color-canvas: #F4F5F7; /* 3 · page background behind cards */ --color-surface-card: #fff; /* 4 · cards, panels, menus, modals */ --color-surface-raised: #fff; /* 5 · card under the cursor */ /* Foreground for anything sitting on an accent fill */ --color-on-accent: #fff; --color-on-accent-wash: rgba(255,255,255,.20); /* chip/badge on an accent fill */ /* Toggle knob — stays light in both themes so it reads on either track */ --color-switch-knob: #fff; /* ---------- Text roles ---------- */ --text-heading: #171717; --text-body: #595959; --text-nav: #3C3C3C; /* ---------- Borders ---------- Three weights: a visible neutral rule, a soft card outline, and a faint outline for controls that should barely register until hovered. */ --color-border: #AFAFAF; --color-border-soft: rgba(23,23,23,.05); --color-border-faint: rgba(23,23,23,.025); /* ---------- Tints ---------- Low-opacity washes. Hover tint is deliberately neutral so hover and active never read the same; status tints keep badges as light washes rather than saturated fills. */ --color-hover-tint: rgba(60,60,60,.06); --color-neutral-tint: rgba(105,105,105,.12); /* ---------- Elevation ---------- Card shadows are tinted with the brand navies (--color-surface-navy's own rgb, 0,15,41) rather than neutral black, so lift reads as navy depth instead of grey haze. */ --shadow-sm: 0 1px 2px rgba(23,23,23,.06); --shadow-md: 0 6px 16px rgba(0,15,41,.10); --shadow-lg: 0 12px 32px rgba(0,15,41,.18); --shadow-card: 0 1px 2px rgba(0,15,41,.05), 0 6px 18px rgba(0,15,41,.07); --shadow-card-hover: 0 4px 10px rgba(0,15,41,.12), 0 18px 34px rgba(0,31,87,.22); --focus-ring: 0 0 0 4px rgba(0,26,79,.22); /* ---------- Typography ---------- */ --font-family: 'Ubuntu', sans-serif; --font-weight-light: 300; --heading-tracking: -0.03em; /* Logo clear space: multiply the logo's rendered width by this ratio to get the minimum required space on every side. */ --logo-clearspace-ratio: 0.25; --text-display-size: 32px; --text-display-line: 40px; --text-display-weight: 700; --text-h1-size: 28px; --text-h1-line: 36px; --text-h1-weight: 700; --text-h2-size: 22px; --text-h2-line: 30px; --text-h2-weight: 700; --text-h3-size: 18px; --text-h3-line: 26px; --text-h3-weight: 500; --text-body-lg-size: 16px; --text-body-lg-line: 24px; --text-body-lg-weight: 400; --text-body-size: 14px; --text-body-line: 22px; --text-body-weight: 400; --text-caption-size: 12px; --text-caption-line: 18px; --text-caption-weight: 400; --text-label-size: 12px; --text-label-line: 16px; --text-label-weight: 500; /* ---------- Spacing — 8px base grid ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---------- Radius ---------- */ --radius-control: 8px; /* buttons, inputs, tags */ --radius-container: 12px; /* cards, modals, panels */ --radius-pill: 999px; /* badges, status pills */ } /* ============================================================================ Dark theme ---------------------------------------------------------------------------- Set data-theme="dark" on . Only values change here; no component rule is duplicated, so the two themes cannot drift apart. --color-surface/-hover/-on-surface/-on-surface-wash, --color-lfz-navy and --color-lfz-scarlet are intentionally absent below: they're brand-fixed identity colors (declared once above) that don't change with the light/dark toggle — only the surface ladder and the interactive accent/danger palette do. Accent is lightened: #001A4F (LFZ Navy) on a dark surface fails contrast almost completely (~1:1), so dark mode uses a lighter tint of the same hue and pairs it with dark text on accent fills (--color-on-accent). Every pairing checked against WCAG AA. 2026-08-10: the original dark-mode base (#86A9F2) read as too pale/"powder blue" once seen against the darkened canvas below — the whole three-step ladder (active/base/hover) was shifted one step darker along the same hue (220°) so the base reads more clearly blue while keeping every pairing at or above 4:1 against the surfaces it actually appears on (buttons, links, focus rings). The old base (#86A9F2) is now the hover state; the old active (#6F94E4) is now the base; only the new active (#4F7EDE) is new. ========================================================================== */ :root[data-theme="dark"] { /* 2026-08-11: #002B82 kept as the accent's FILL value (buttons, avatars, table headers, anything paired with --color-on-accent text on top — that stays legible regardless of how dark the fill is, since on-accent tracks it). It's the FOREGROUND role — text/icon/border/outline/ring color sitting directly on a page surface — that can't use it: against this near-black ladder it lands at 1.0–1.5:1, nowhere near readable. --color-accent-fg (white, below) is the split-off token for that role; every foreground usage in the CSS was moved to it. Hover/active are still derived from #002B82 using light mode's own relative lightness steps, for the fill role only. */ --color-accent: #002B82; --color-accent-hover: #00349C; --color-accent-active: #002E8A; /* Foreground-role tint: a plain light wash (matches --color-hover-tint's own light-on-dark logic) rather than an accent-tinted one — a wash derived from #002B82 would be just as invisible on this ladder as the accent itself. Paired with --color-accent-fg text, not --color-accent. */ --color-accent-tint: rgba(255,255,255,.10); --color-accent-tint-strong: rgba(255,255,255,.16); --color-accent-fg: #fff; /* Was #FF7A66 — enough green/blue in that mix to read as coral/orange rather than red next to light mode's danger. Retuned to a balanced red (equal green/blue channels) so Cancel-type actions read as clearly red in both themes. Independent of light mode's exact danger hex — this is a perceptual dark-surface tuning, not a derived shade of it. */ --color-danger: #F87171; --color-danger-hover: #FB8F87; --color-danger-active: #E15B4E; --color-danger-tint: rgba(248,113,113,.16); --color-success: #4FD08D; --color-warning: #E3AC55; --color-info-bg: #1C2941; --color-info-text: #C6D6F2; --color-success-tint: rgba(79,208,141,.16); --color-warning-tint: rgba(227,172,85,.18); --color-grey: #98A1B2; --color-grey-light: #464F60; --color-chart-blue-dark: #6F94E4; --color-chart-blue-light: #B9CDF5; --color-chart-grey-light: #C3CAD6; /* Scoped to Medical Enterprise Admin's charts only — see the light-theme comment above. #2B76FF per Temitope's direction; #8A93A6 is a mid grey picked to read as clearly grey (not near-white) while still clearing ~4-6:1 against the surface ladder. */ --color-chart-blue-vivid: #2B76FF; --color-chart-grey-vivid: #8A93A6; /* 2026-08-12: was #2B76FF (same value as --color-chart-blue-vivid above) — that reads fine as a large chart fill but fails as small status-pill text on the tint below (measured ~2.9:1 against the tint blended over --color-surface-card, under the 3:1 floor for small UI text). Reusing #6F94E4 instead — the earlier lightened-accent value from this same token's history (see --color-accent comment above) — clears ~4:1 against the same tint without inventing a new hex. */ --color-upcoming: #6F94E4; --color-upcoming-tint: rgba(43,118,255,.16); /* Surface ladder — reverted 2026-08-11 back to the near-black range (was briefly lifted to medium-blue so the fixed-navy accent above would clear 3:1 against it; reverted per direction — see the --color-accent comment above for the contrast cost of keeping both this dark and the accent dark). */ --color-surface-rail: #090E19; --color-surface-header: #0E1522; --color-canvas: #111724; --color-surface-card: #202A3D; --color-surface-raised: #2A364D; /* Fill is dark navy (#002B82) again, so on-accent (text sitting on that fill) is light again, matching light mode's own accent-fill pairing. */ --color-on-accent: #fff; --color-on-accent-wash: rgba(255,255,255,.20); --color-switch-knob: #E8ECF4; --text-heading: #F2F4F8; --text-body: #B7C0CF; --text-nav: #D2D9E4; --color-border: #3A4356; --color-border-soft: rgba(255,255,255,.09); --color-border-faint: rgba(255,255,255,.055); --color-hover-tint: rgba(255,255,255,.06); --color-neutral-tint: rgba(152,161,178,.16); /* Restrained in dark — separation is carried by the surface ladder, and a navy-tinted shadow would vanish against an already-navy surface. */ --shadow-sm: 0 1px 2px rgba(0,0,0,.28); --shadow-md: 0 4px 14px rgba(0,0,0,.32); --shadow-lg: 0 16px 40px rgba(0,0,0,.52); --shadow-card: 0 1px 2px rgba(0,0,0,.28); --shadow-card-hover: 0 4px 14px rgba(0,0,0,.38); /* Foreground-role, like --color-accent-fg above — a ring derived from #002B82 would be invisible against this ladder the same way the text color would be. */ --focus-ring: 0 0 0 4px rgba(255,255,255,.35); }