/* ========================================================================== BridgePoint — Design Tokens v2.0 BridgePoint Education Ltd · Company No. 17061559 -------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH FOR COLOUR. Nothing else in the codebase may contain a raw hex value. If you need a colour that isn't here, it doesn't exist yet — add it here first, then use it. Six brand colours are fixed (agreed, derived from the logo). Everything else in this file is derived from them and has been validated to WCAG 2.1 AA. Every ratio in the comments is measured, not estimated. THREE RULES THAT ARE NOT NEGOTIABLE 1. Teal is chrome, never data. Teal may colour the logo, nav, buttons, links, active states and focus rings. It must NEVER colour a heatmap cell, a bar, a mastery band or any other data mark. Base teal #0F6E56 and the old success green #1A7F5A are 5.4 ΔE apart — a full-colour reader cannot reliably tell them apart. If teal appears in the data layer, "BridgePoint brand" and "this student is fine" become the same colour. 2. Amber on light surfaces is a FILL, never ink and never a line. #EF9F27 is 2.11:1 on warm white — under the 3:1 floor for even non-text UI. On light, amber is a background with --accent-on text on top of it. For amber-coloured TEXT on light, use --accent-text. On dark, amber is 7.55:1 and may be used freely. 3. Mastery bands are one hue with four lightness steps, not a red-amber-green traffic light. A four-hue traffic light was tested and fails colour-vision separation badly (red vs green ΔE 2.8 under deuteranopia — indistinguishable). Roughly 1 in 12 boys has red-green colour vision deficiency; in a 100-student cohort that is several students who cannot read their own gap report. The single-hue ramp passes because lightness, not hue, carries the meaning. ========================================================================== */ :root { color-scheme: light; /* ---- BRAND (fixed — do not alter) ------------------------------------ */ --bp-teal: #0F6E56; /* primary, light surfaces 6.01:1 on bg */ --bp-teal-mid: #1D9E75; /* primary on dark; hover on light */ --bp-amber: #EF9F27; /* accent — fills only on light */ --bp-amber-dark: #854F0B; /* amber-family TEXT on light 6.52:1 on bg */ --bp-warm-white: #FFFBF2; /* light background */ --bp-ink: #1A1F2E; /* dark surface + body text on light */ /* ---- SURFACES -------------------------------------------------------- */ --bg: #FFFBF2; /* page plane */ --surface: #FFFFFF; /* cards, topbar, tables */ --surface-2: #F6F1E6; /* insets, table headers, breadcrumbs */ --surface-3: #EDE6D6; /* pressed / selected inset */ --border: #E8E0D2; /* hairline */ --border-strong: #D6CCBA; /* emphasised divider, input border */ /* ---- TEXT ------------------------------------------------------------ */ --text: #1A1F2E; /* body 15.89:1 on bg */ --text-2: #3D4354; /* secondary 9.55:1 on bg */ --text-muted: #5C6273; /* labels, captions 5.89:1 on bg */ --text-faint: #7C8294; /* decorative ONLY — never for meaning 3.71 */ /* ---- PRIMARY (teal) -------------------------------------------------- */ --primary: #0F6E56; --primary-hover: #1D9E75; --primary-on: #FFFFFF; /* text on a teal fill 6.20 */ --primary-tint: rgba(15,110,86,0.08); /* active pill background */ --primary-tint-strong:rgba(15,110,86,0.16); --primary-border: rgba(15,110,86,0.30); --focus-ring: #0F6E56; /* 2px solid + 2px offset */ /* ---- ACCENT (amber) — see rule 2 ------------------------------------- */ --accent: #EF9F27; --accent-on: #1A1F2E; /* text on an amber fill 7.55 */ --accent-text: #854F0B; /* amber-family text 6.52 */ --accent-tint: rgba(239,159,39,0.14); --accent-border: rgba(239,159,39,0.45); /* ---- MASTERY BANDS — ordinal, one hue, four steps -------------------- */ /* Quietest = secure. Darkest = worst. Dark spots are where to go. */ --band-secure: #E99A68; --band-secure-on: #1A1F2E; /* 7.26 */ --band-developing: #D67436; --band-developing-on: #1A1F2E; /* 5.01 */ --band-atrisk: #A63F10; --band-atrisk-on: #FFFBF2; /* 6.09 */ --band-gap: #752407; --band-gap-on: #FFFBF2; /* 10.11 */ /* ---- BINARY STATUS — ALWAYS shipped with a ✓ / ✗ icon ---------------- */ /* Colour reinforces the icon. The icon carries the meaning alone. */ --ok: #1B7A38; --ok-tint: rgba(27,122,56,0.10); /* 5.23 on bg */ --err: #B3261E; --err-tint: rgba(179,38,30,0.10); /* 6.33 on bg */ /* ---- GEOMETRY & ELEVATION -------------------------------------------- */ --radius: 12px; --radius-lg: 16px; --radius-pill:20px; --shadow: 0 2px 12px rgba(26,31,46,0.08); --shadow-lg: 0 8px 32px rgba(26,31,46,0.12); } /* ========================================================================== DARK MODE Selected step-by-step for the dark surface — not an automatic inversion. Note the re-anchor: Leon's #1A1F2E is the CARD colour here, with a darker plane behind it, because #1D9E75 needs a surface at least that dark to clear 4.5:1 for small text. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; } } [data-theme="dark"] { color-scheme: dark; --bg: #141926; --surface: #1A1F2E; /* brand ink = card surface */ --surface-2: #1E2432; --surface-3: #252C3D; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --text: #F2F4F8; /* 15.94:1 on bg */ --text-2: #C3C8D4; --text-muted: #98A0B2; /* 6.26:1 on surface */ --text-faint: #6E7688; /* decorative ONLY */ --primary: #1D9E75; /* 4.85:1 on surface */ --primary-hover: #3FBE92; --primary-on: #0B1018; /* 5.63:1 on a teal fill */ --primary-tint: rgba(29,158,117,0.14); --primary-tint-strong:rgba(29,158,117,0.24); --primary-border: rgba(29,158,117,0.40); --focus-ring: #3FBE92; --accent: #EF9F27; /* 7.55:1 — free to use */ --accent-on: #1A1F2E; --accent-text: #EF9F27; /* NOT --bp-amber-dark: 2.44 */ --accent-tint: rgba(239,159,39,0.16); --accent-border: rgba(239,159,39,0.40); /* Anchor flips: quietest against a dark plane is the DARKEST step. */ --band-secure: #9A3C10; --band-secure-on: #F2F4F8; /* 6.30 */ --band-developing: #B84E1B; --band-developing-on: #F2F4F8; /* 4.83 */ --band-atrisk: #DE7A42; --band-atrisk-on: #141926; /* 6.63 */ --band-gap: #F0A87C; --band-gap-on: #141926; /* 9.94 */ --ok: #3FCF7F; --ok-tint: rgba(63,207,127,0.14); --err: #F87171; --err-tint: rgba(248,113,113,0.14); --shadow: 0 2px 12px rgba(0,0,0,0.40); --shadow-lg: 0 8px 32px rgba(0,0,0,0.55); } /* ========================================================================== TYPOGRAPHY — unchanged from current build, recorded here so the whole visual system lives in one file. ========================================================================== */ :root { --font-display: 'Playfair Display', Georgia, serif; /* headings, figures */ --font-body: 'DM Sans', system-ui, sans-serif; /* everything else */ --font-mono: 'DM Mono', ui-monospace, monospace; /* labels, data, tags */ } /* ========================================================================== BASE — apply the tokens once, here, so pages don't repeat themselves. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.3s, color 0.3s; } /* Visible keyboard focus everywhere. Currently missing from the build — this alone is a common accessibility-audit failure. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }