/* ============================================================================ Biomarker Navigator — visual canon Brief: br_6flsbd Brand: biomarker-navigator Surface: brand The registered canon. Every product surface is built from these values and judged against them. Do not hard-code a value that exists here as a token. Type is SIL OFL 1.1 and self-hosted from ./fonts — no CDN, no network. Every colour carries a light and a dark value; dark is a primary reading condition, not an accommodation. ============================================================================ */ /* --- Faces. Self-hosted; see fonts/*-LICENSE.txt (SIL OFL 1.1). ----------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/inter-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/inter-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/ibm-plex-mono-500.woff2") format("woff2"); } :root { /* --- Type ------------------------------------------------------------- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Sizes and their leading. Every leading is a multiple of --space-base, so text sits on the 4px grid the spacing scale is built from. */ --text-xs: 12px; --leading-xs: 16px; --text-sm: 14px; --leading-sm: 20px; --text-base: 16px; --leading-base: 24px; --text-md: 18px; --leading-md: 28px; --text-lg: 22px; --leading-lg: 32px; --text-xl: 28px; --leading-xl: 36px; --text-2xl: 36px; --leading-2xl: 44px; --text-3xl: 46px; --leading-3xl: 56px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Prose line length. Clinical reading, not marketing copy. */ --measure: 68ch; /* --- Spacing ---------------------------------------------------------- One base unit. Every step is a whole multiple of it; the number in the token name IS the multiplier. Nothing else is a legal spacing value. */ --space-base: 4px; --space-1: 4px; /* 1 x */ --space-2: 8px; /* 2 x */ --space-3: 12px; /* 3 x */ --space-4: 16px; /* 4 x */ --space-6: 24px; /* 6 x */ --space-8: 32px; /* 8 x */ --space-12: 48px; /* 12 x */ --space-16: 64px; /* 16 x */ --space-24: 96px; /* 24 x */ --space-32: 128px; /* 32 x */ /* --- Motion ----------------------------------------------------------- Motion is a cost paid out of a clinician's attention. The only motion worth it answers "what just changed, and where did it go?" — so the scale is short, and there are four durations because a fifth would be a choice nobody could justify. Every interface duration is under 400ms; the brand duration is the only one allowed to be felt. EVERY motion built from these MUST have a prefers-reduced-motion path that REMOVES or REPLACES the movement — never one that merely shortens it. */ --duration-quick: 120ms; /* state flips: toggle, disclosure chevron */ --duration-base: 200ms; /* an element entering or leaving in place */ --duration-slow: 320ms; /* a surface arriving: sheet, panel, drawer */ --duration-brand: 900ms; /* the brand sequence. Nothing in-product uses this. */ --ease-enter: cubic-bezier(0, 0, 0.2, 1); /* decelerate — arriving, settles */ --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* accelerate — leaving, gone */ --ease-move: cubic-bezier(0.4, 0, 0.2, 1); /* both ends — moving between two places */ /* --- Geometry ---------------------------------------------------------- */ --rule-width: 1px; --radius: 2px; /* near-rectilinear; the grid does the work, not the corners */ /* --- Colour — LIGHT (default) ------------------------------------------ Verified against WCAG 2.2 AA by ./verify.py. Do not edit a value here without re-running it: several pairs sit deliberately close to the floor. */ --color-paper: #FFFFFF; --color-surface: #F5F7FA; --color-ink: #15181D; --color-ink-muted: #59616E; --color-rule: #D5DBE3; /* decorative divider — NOT a UI boundary */ --color-border: #78889D; /* bounds an interactive control; >= 3:1 */ --color-accent: #12468F; --color-accent-ink: #FFFFFF; /* Deliberately NOT the accent hue: the most-focused elements (links, primary buttons) are themselves accent-coloured, and a ring in the accent hue on an accent element is invisible. Ring geometry derives from the base unit — calc(var(--space-base) / 2) — and sits OUTSIDE the component via outline-offset, so it only ever needs contrast against paper or surface. */ --color-focus: #047A91; /* Evidence confidence. Luminance is staggered >= 1.5x between adjacent states so the scale survives greyscale and colour-blind rendering. Colour is never the only cue — see the labelling rule in the specimen. */ --color-confidence-high: #072B16; --color-confidence-review: #5E3E05; --color-confidence-low: #59626D; color-scheme: light dark; } /* --- Colour — DARK ------------------------------------------------------- A reading condition, not an inversion. Confidence keeps its ordinal meaning: the more confident the state, the further it sits from the page. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-paper: #0E1116; --color-surface: #171B22; --color-ink: #E8ECF2; --color-ink-muted: #A2ACBA; --color-rule: #2B323C; --color-border: #59687C; --color-accent: #8FB4EC; --color-accent-ink: #0E1116; --color-focus: #19BEDE; --color-confidence-high: #9CDAB6; --color-confidence-review: #D39D42; --color-confidence-low: #79879A; } } :root[data-theme="dark"] { --color-paper: #0E1116; --color-surface: #171B22; --color-ink: #E8ECF2; --color-ink-muted: #A2ACBA; --color-rule: #2B323C; --color-border: #59687C; --color-accent: #8FB4EC; --color-accent-ink: #0E1116; --color-focus: #19BEDE; --color-confidence-high: #9CDAB6; --color-confidence-review: #D39D42; --color-confidence-low: #79879A; }