/* ============================================================ CTP — Design Tokens (v2) Continuum Teal #00BBBC (Pantone 7466 C) accent, Continuum Dark Blue #1B2A43 (Pantone 276 C) anchor. v2 adds: Fraunces display face, warm paper neutral, motif vars. ============================================================ */ :root { /* ---- Continuum Teal scale ---- */ --teal-50: #e6fafa; --teal-100: #c4f2f2; --teal-200: #93e8e9; --teal-300: #57dadb; --teal-400: #1fcbcc; --teal-500: #00bbbc; /* CONTINUUM TEAL — Pantone 7466 C */ --teal-600: #00a0a1; --teal-700: #00807f; --teal-800: #04605f; --teal-900: #0a4544; /* ---- Continuum Gold (reserved for key CTAs + small accents) ---- */ --gold-300: #fbe27a; --gold-400: #f9d34c; --gold-500: #f7c51e; /* CONTINUUM GOLD */ --gold-600: #e0b010; /* hover */ --gold-700: #b98f06; --gold-tint: #fdf6dc; /* ---- Continuum Dark Blue scale ---- */ --navy-950: #0d1525; --navy-900: #111c30; --navy-850: #15223a; --navy-800: #1b2a43; /* CONTINUUM DARK BLUE — Pantone 276 C */ --navy-700: #273750; --navy-600: #35455f; /* ---- Slate neutrals ---- */ --slate-50: #f8fafc; --slate-100: #f1f4f8; --slate-200: #e3e8ef; --slate-300: #cbd3df; --slate-400: #94a1b2; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1f2a3a; --slate-900: #131c2b; /* ---- Surfaces ---- */ --canvas: #f4f6f9; --surface: #ffffff; --surface-subtle: #fbfcfe; --surface-muted: #f6f8fb; --paper: #faf8f4; /* v2: warm editorial off-white */ --paper-line: #eee9df; /* ---- Semantic status ---- */ --green-500: #15a06a; --green-700: #117a52; --green-bg: #e6f6ef; --red-500: #e0524d; --red-700: #bb2f2b; --red-bg: #fdecec; --amber-500: #d98a1a; --amber-700: #a4640f; --amber-bg: #fdf3e2; --blue-500: #2f74d0; --blue-700: #1f57a8; --blue-bg: #e7f0fb; --purple-500:#7b5cd6; --purple-700:#5d44ad; --purple-bg:#f0ecfb; /* ---- Department palette ---- */ --dept-pt: #1f57a8; --dept-pt-bg: #e7f0fb; --dept-ot: #5d44ad; --dept-ot-bg: #f0ecfb; --dept-st: #a4640f; --dept-st-bg: #fdf3e2; --dept-adm: #117a52; --dept-adm-bg: #e6f6ef; /* ---- Aliases ---- */ --accent: var(--teal-500); --text-strong: var(--navy-900); --text-body: var(--slate-700); /* Text colours are NOT the neutral scale. They were, and that is how they failed: --slate-500 and --slate-400 were picked against white, then reused on the warm --paper and cool --canvas bands, where they drop under the WCAG AA floor of 4.5:1. Measured on the live site: slate-500 #64748b on paper 4.49:1 under slate-500 #64748b on canvas 4.43:1 under slate-400 #94a1b2 on white 2.63:1 badly under, and it was carrying form field labels These two are tuned to clear 4.5:1 on white, paper AND canvas, so a band's background can change without the text quietly failing. The slate scale itself is untouched and is still correct for borders and fills. Use these for text. Use the scale for everything else. */ --text-muted: #5d6b80; /* 5.41 white / 5.10 paper / 5.04 canvas */ --text-faint: #5e6a7d; /* 5.48 white / 5.16 paper / 5.09 canvas */ --text-on-dark: #e6ebf2; /* 12.02 on navy-800 */ --text-on-dark-muted: #97a6ba; /* 5.81 on navy-800 */ /* ---- Accent text, by the ground it sits on ---- Continuum Teal is a LIGHT colour. That single fact drives all three: it cannot carry white text, it is hard to read as text on white, and it is excellent as text on navy. Reach for the one that names the background you are putting it on. --on-accent text ON a teal or gold FILL. Navy, never white: white on teal-500 is 2.38:1, navy on teal-500 is 6.06:1, and the gold CTA already uses navy at 8.88. One label colour now serves both accent fills. --accent-on-light teal AS text on paper/canvas/white. teal-700 was 4.45:1 on canvas; this clears it. --accent-on-dark teal AS text on a navy band. */ --on-accent: #1b2a43; /* 6.06 on teal-500 / 8.88 on gold-500 */ --accent-on-light: #00706f; /* 5.92 white / 5.58 paper / 5.51 canvas */ /* Teal as LARGE display text (>=24px), where the AA bar drops to 3:1 and the lighter teal can be kept. Used only by .em-teal, which appears only inside display section titles. teal-600 measured 2.99 on canvas -- a rounding miss, but a miss. */ --accent-display: #008f90; /* 3.94 white / 3.71 paper / 3.67 canvas */ --accent-on-dark: #1fcbcc; /* 7.18 on navy-800 / 8.50 on navy-900 */ --border-subtle: rgba(27,42,67,0.08); --border-default: var(--slate-200); --border-strong: var(--slate-300); --focus-ring: rgba(0,187,188,0.18); /* ---- Typography (Inter everywhere — brand typeface) ---- */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: var(--font-sans); /* ---- Radii ---- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 16px; --radius-pill: 999px; --radius-photo: 18px; /* v3: rounded square. The v2 arch motif was dropped in the Aug-2026 design review. */ /* ---- Shadows ---- */ --shadow-xs: 0 1px 2px rgba(27,42,67,0.04); --shadow-sm: 0 1px 2px rgba(27,42,67,0.05); --shadow-card: 0 1px 2px rgba(27,42,67,0.04), 0 2px 8px rgba(27,42,67,0.05); --shadow-hover: 0 6px 20px rgba(27,42,67,0.08); --shadow-modal: 0 20px 50px rgba(13,21,37,0.22); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-settle: cubic-bezier(0.2, 0.8, 0.3, 1); --dur-fast: 0.14s; --dur-base: 0.18s; --dur-slow: 0.24s; /* ---- Type scale ---- A 1.125 minor third off a 17px body. site.css currently sets 50 distinct pixel sizes, twenty of them between 11 and 20px in half-pixel steps -- a distinction nobody can see, so it communicates nothing and only costs the next person a decision. These eleven replace them. New work uses these; existing declarations are being migrated surface by surface. */ --fs-caption: 12px; --lh-caption: 1.45; --fs-small: 13px; --lh-small: 1.5; --fs-body-s: 15px; --lh-body-s: 1.6; --fs-body: 17px; --lh-body: 1.62; --fs-lead: 19px; --lh-lead: 1.55; --fs-h4: 21px; --lh-h4: 1.35; --fs-h3: 24px; --lh-h3: 1.3; --fs-h2: 32px; --lh-h2: 1.18; --fs-h1: 44px; --lh-h1: 1.1; --fs-display: clamp(36px, 5.4vw, 56px); --lh-display: 1.04; --fs-stat: clamp(40px, 6vw, 64px); --lh-stat: 1; /* ---- Spacing ---- 4px base. site.css currently uses 40 distinct padding values and 25 gap values, including 5, 7, 9, 11 and 13px. Same reasoning as the type scale. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 80px; --sp-11: 96px; --sp-12: 128px; --section-y: var(--sp-10); --section-y-sm: var(--sp-8); --container-max: 1200px; --gutter: var(--sp-5); --gutter-sm: var(--sp-4); /* ---- Overlay alpha ladder ---- site.css holds 92 distinct rgba() values, nearly all translucent white or navy at alphas from 0.04 to 0.92 -- 0.065, 0.12, 0.14, 0.16, 0.25, 0.28 and so on. Surfaces that should match do not quite match. Six steps, assigned by role: 1 hairline, 2 resting surface, 3 border on dark, 4 hover, 5 pressed, 6 scrim. */ --ov-light-1: rgba(255,255,255,0.04); --ov-light-2: rgba(255,255,255,0.08); --ov-light-3: rgba(255,255,255,0.12); --ov-light-4: rgba(255,255,255,0.20); --ov-light-5: rgba(255,255,255,0.32); --ov-light-6: rgba(255,255,255,0.55); --ov-dark-1: rgba(27,42,67,0.04); --ov-dark-2: rgba(27,42,67,0.08); --ov-dark-3: rgba(27,42,67,0.12); --ov-dark-4: rgba(27,42,67,0.20); --ov-dark-5: rgba(27,42,67,0.32); --ov-dark-6: rgba(13,21,37,0.55); /* ---- Breakpoints, written down ---- Not usable in @media (custom properties cannot be), but declared so the set stops being ad hoc. site.css mixes 640, 920, 1080 and 1120px with nothing between 640 and 920, so the whole tablet range rides on one rule. It holds -- verified at 768px -- but by luck rather than by design. sm 640 . md 900 (nav collapses, since Oct 2026) . lg 1120 . xl 1280 */ }