/* ═══════════════════════════════════════════════════════════════════════════ TOKENS — the single source of visual truth (04-design-system.md). Colour is the health identity palette, not an approximation of it. Two typefaces, two jobs: Public Sans carries everything the product SAYS; IBM Plex Mono carries everything it has MEASURED. Flat: no gradients, no drop shadows, square containers — status is a rule, not a wash. This is a clinical record, not a wellness app. The whole theming contract is ONE attribute: . Three standing rules: · Blue is reserved for things you can click; heading ink is --brand. · The focus yellow is a FILL, never text (--warm is the text form). · Status is a heavy left rule (4/8px), never a tinted box. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* The health identity palette — fixed, never themed. */ --health-blue: #005EB8; --health-dark-blue: #003087; --health-bright-blue: #0072CE; --health-light-blue: #41B6E6; --health-aqua: #00A499; --health-green: #007F3B; --health-yellow: #FFB81C; --health-red: #D5281B; --health-purple: #330072; /* Structural brand colours. The demonstrator themed --health-blue itself as an escape hatch; here the structural roles get honest names and the health-palette values are their default. Components reference THESE, never --health-* directly. */ --brand-primary: var(--health-blue); --brand-deep: var(--health-dark-blue); /* Semantic tokens — health values. */ --brand: #212B32; --accent: var(--health-blue); --accent-light: #0072CE; --on-accent: #FFFFFF; /* ink that sits ON an accent fill */ --green: #007F3B; --blue: #005EB8; --red: #D5281B; --warm: #8A5B00; /* warning TEXT — #FFB81C fails contrast on white */ --warm-fill: #FFB81C; /* warning FILL */ --text: #212B32; --text-muted: #4C6272; --text-light: #4C6272; /* deliberately NOT lighter — 4.5:1 minimum, everywhere */ --border: #D8DDE0; --border-strong: #AEB7BD; --bg: #F0F4F5; --bg-card: #FFFFFF; --bg-dark: #212B32; --surface-hover: #E4EFF8; --focus: #FFDD00; /* the GOV.UK focus yellow (the published value, not an approximation) */ --focus-ink: #212B32; --radius: 4px; /* controls only. Containers are square. */ --shadow: none; --sidebar-bg: #003087; --sidebar-accent: #005EB8; --chip: #E4EFF8; --scroll-thumb: #B4C0C8; --scroll-thumb-hover: #93A2AC; --pulse: rgba(0, 94, 184, 0.20); --nav-active-indicator: var(--health-light-blue); --font: 'Public Sans', Arial, sans-serif; --font-display: 'Public Sans', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; /* Button states (primary presses by DARKENING — never a bevel). */ --btn-primary-bg: #007F3B; --btn-primary-hover: #00682F; --btn-primary-active: #00401E; --btn-primary-disabled-bg: #8DB59D; --btn-primary-disabled-ink: #FFFFFF; --btn-danger-hover-bg: #A81C11; /* Badge tints — square, bordered, legible. the health identity does not do pills. Grey means ABSENCE OF DATA, never "warning about nothing measured". */ --badge-green-bg: #E5F2E9; --badge-green-ink: #00602F; --badge-green-border: #A9CDB6; --badge-amber-bg: #FFF4DB; --badge-amber-ink: #6B4700; --badge-amber-border: #E8C77A; --badge-red-bg: #F9E3E1; --badge-red-ink: #A81C11; --badge-red-border: #E5A9A2; --badge-blue-bg: #E4EFF8; --badge-blue-ink: #004E96; --badge-blue-border: #A8C8E4; --badge-grey-bg: #F0F4F5; --badge-grey-ink: #4C6272; --badge-grey-border: #D8DDE0; --safety-bg: #FFF9EC; --msg-in-bg: #E8EDEE; } /* ── The sport skin: 26+ overridden custom properties and NOTHING else. Dark performance console; bright green needs DARK ink on accent fills. ── */ :root[data-domain="sport"] { --brand-primary: #19C37D; --brand-deep: #0E1B2C; --brand: #EAF1FA; --accent: #19C37D; --accent-light: #22E08F; --on-accent: #06281B; --green: #19C37D; --blue: #3DA5FF; --red: #FF5A5A; --warm: #F5A623; --warm-fill: #F5A623; --text: #EAF1FA; --text-muted: #9DB0C7; --text-light: #8194AC; --border: #22304A; --border-strong: #33456A; --bg: #0B1220; --bg-card: #131E30; --bg-dark: #070C15; --surface-hover: #1B2A42; --focus: #22E08F; --focus-ink: #06281B; --radius: 12px; --shadow: 0 2px 16px rgba(0, 0, 0, 0.35); --sidebar-bg: #0E1B2C; --sidebar-accent: #19C37D; --chip: rgba(255, 255, 255, 0.06); --scroll-thumb: #2C3E5C; --scroll-thumb-hover: #3F5A85; --pulse: rgba(25, 195, 125, 0.28); --nav-active-indicator: rgba(6, 40, 27, 0.55); --font: 'DM Sans', 'Public Sans', Arial, sans-serif; --font-display: 'DM Sans', 'Public Sans', Arial, sans-serif; /* clean sans headings — no serif */ --btn-primary-bg: #19C37D; --btn-primary-hover: #22E08F; --btn-primary-active: #14A768; --btn-primary-disabled-bg: #1E5C44; --btn-primary-disabled-ink: #7FA894; --btn-danger-hover-bg: #FF5A5A; --badge-green-bg: rgba(25, 195, 125, 0.16); --badge-green-ink: #3FE0A6; --badge-green-border: rgba(25, 195, 125, 0.45); --badge-amber-bg: rgba(245, 166, 35, 0.16); --badge-amber-ink: #F5C173; --badge-amber-border: rgba(245, 166, 35, 0.45); --badge-red-bg: rgba(255, 90, 90, 0.16); --badge-red-ink: #FF9A9A; --badge-red-border: rgba(255, 90, 90, 0.45); --badge-blue-bg: rgba(61, 165, 255, 0.16); --badge-blue-ink: #8FC8FF; --badge-blue-border: rgba(61, 165, 255, 0.45); --badge-grey-bg: rgba(255, 255, 255, 0.06); --badge-grey-ink: #9DB0C7; --badge-grey-border: #33456A; --safety-bg: rgba(245, 166, 35, 0.10); --msg-in-bg: #1B2A42; }