:root { /* ---- Logo (referenced directly in SVG fill attributes) ---- */ --logo-b: #1C2E4A; --logo-c: #2F7F7A; --logo-text: #1C2E4A; /* ---- Brand ---- */ --brand-primary: #1C2E4A; /* 13.64:1 w/ white text — AAA */ --brand-primary-hover: #274060; --brand-accent: #2F7F7A; /* 4.73:1 — AA only. NON-TEXT use, or large text. */ --brand-accent-hover: #26706B; --brand-highlight: #F2C94C; /* NON-TEXT ONLY. 1.59:1. Never use for words. */ --brand-success: #28A745; /* NON-TEXT ONLY (icons, fills, borders). */ --brand-warning: #E0A800; /* NON-TEXT ONLY. */ --brand-error: #E24C4C; /* NON-TEXT ONLY. */ /* ---- Brand — AAA text variants (>= 7:1 on --bg-secondary) ---- USE THESE FOR ANY COLOURED TEXT, including: error messages, success messages, helper text, links, and text on tinted backgrounds. */ --brand-accent-text: #235F5C; /* 7.02:1 — links, teal button fill w/ white text */ --brand-accent-text-hover: #1B4B49; --brand-success-text: #186329; /* 7.04:1 */ --brand-warning-text: #6E5200; /* 7.00:1 */ --brand-error-text: #983333; /* 7.04:1 */ /* ---- Neutral scale ---- */ --neutral-white: #FFFFFF; --neutral-50: #F9FAFB; --neutral-100: #F3F3F3; --neutral-200: #E5E7EB; --neutral-300: #D1D5DB; --neutral-400: #9CA3AF; --neutral-500: #6B7280; /* 4.83:1 — AA. Prefer --text-muted for AAA. */ --neutral-600: #4B5563; /* 7.56:1 — AAA */ --neutral-700: #374151; /* 10.31:1 — AAA */ --neutral-black: #000000; /* ---- Semantic text (all AAA on --bg-secondary) ---- */ --text-color: var(--neutral-700); /* headings, primary text 10.31:1 */ --text-body: var(--neutral-600); /* paragraphs 7.56:1 */ --text-muted: #515661; /* helper/placeholder 7.04:1 (replaces --neutral-500 for text) */ --text-inverse: #FFFFFF; /* ---- Borders (WCAG 1.4.11 — non-text 3:1) ---- */ --border-default: #929599; /* 3.01:1 on white — inputs, dividers that convey state */ --border-subtle: var(--neutral-200); /* DECORATIVE ONLY — fails 3:1, never load-bearing */ --border-strong: var(--neutral-600); --border-width: 1.5px; /* ---- Surface backgrounds ---- */ --bg-primary: #FFFFFF; --bg-secondary: #F9FAFB; --bg-tertiary: #F3F3F3; --bg-start: var(--neutral-50); --bg-end: var(--neutral-white); /* ---- Status surface tints (pair with matching -text token) ---- */ --bg-success: #EAF6EC; --bg-warning: #FBF3DC; --bg-error: #FBEDED; --bg-info: #E9F2F1; /* ---- Shadows ---- */ --shadow-base: 20, 54, 84; --shadow-light: rgba(20, 54, 84, 0.15); --shadow-med: rgba(20, 54, 84, 0.25); --shadow-strong: rgba(20, 54, 84, 0.40); --shadow-focus: rgba(20, 54, 84, 0.25); --shadow-focus-strong: rgba(20, 54, 84, 0.55); --shadow-accent-sm: rgba(47, 127, 122, 0.12); --shadow-accent-md: rgba(47, 127, 122, 0.25); --shadow-accent-lg: rgba(47, 127, 122, 0.35); --shadow-accent-focus: rgba(47, 127, 122, 0.18); --shadow-primary-sm: rgba(28, 46, 74, 0.20); --shadow-primary-md: rgba(28, 46, 74, 0.28); /* ---- Elevation presets (PROMOTED — composed box-shadow) ---- Shadows are decorative only. Never the sole indicator of an interactive boundary (1.4.11). */ --elevation-1: 0 1px 2px var(--shadow-light); --elevation-2: 0 6px 20px var(--shadow-light); --elevation-3: 0 12px 40px var(--shadow-med); /* ---- Typography ---- */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: var(--font-body); /* ---- Font sizes ---- */ --text-2xs: 11px; /* AVOID. Decorative/legal only. Never body copy. */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; /* compact UI chrome — NOT body prose */ --text-md: 16px; /* BODY MINIMUM. Also prevents iOS input auto-zoom. */ --text-lg: 18px; --text-xl: 22px; --text-2xl: 26px; /* ---- Fluid heading scale (PROMOTED from website.css) ---- */ --text-h1: clamp(28px, 5vw, 48px); --text-h2: clamp(22px, 4vw, 36px); --text-h3: clamp(18px, 3vw, 26px); --text-h4: var(--text-xl); /* ---- Font weights ---- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* heading ceiling */ --font-weight-bold: 700; /* rare emphasis only */ /* ---- Line height (PROMOTED) — WCAG 1.4.8 AAA: body >= 1.5 ---- */ --line-height-body: 1.6; --line-height-heading: 1.25; --line-height-tight: 1.2; /* ---- Text spacing (WCAG 1.4.12 — must remain overridable) ---- */ --paragraph-spacing: 1.6em; /* >= 2x font size when combined w/ line-height */ --letter-spacing-body: 0; --letter-spacing-heading: 0.3px; /* ---- Measure (WCAG 1.4.8 AAA: max 80 chars) ---- */ --measure: 70ch; /* ---- Spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; /* ---- Layout (PROMOTED from website.css) ---- */ --container-max: 1280px; --container-narrow: 600px; --container-pad: var(--space-4); --container-pad-lg: var(--space-5); /* ---- Breakpoints (PROMOTED) ---- NOTE: CSS vars do NOT work inside @media queries. These are reference values for JS + documentation. Hardcode the same numbers in @media, or use a preprocessor. Do not drift from these. */ --bp-xs: 480px; --bp-sm: 768px; --bp-md: 1024px; --bp-lg: 1280px; /* ---- Opacity / state ---- */ --opacity-muted: 0.7; --opacity-disabled: 0.45; --state-disabled-opacity: 0.45; /* ---- Accessibility — focus indicators (WCAG 2.4.11 / 2.4.13) ---- ALWAYS render both layers. The contrast layer guarantees >= 3:1 against ANY surface, including navy buttons where the teal ring alone is only 2.88:1. */ --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring-color: var(--brand-accent-text); /* darker teal — 7:1 on light */ --focus-ring-contrast: var(--neutral-white); /* second ring, guarantees separation */ /* ---- Accessibility — touch targets (WCAG 2.5.5 AAA: 44x44) ---- */ --min-touch-target: 44px; --touch-gap-min: var(--space-2); /* spacing between adjacent targets */ /* ---- Motion (collapses to 0 under reduced-motion, below) ---- */ --transition-micro: 0.10s ease; --transition-fast: 0.15s ease; --transition-med: 0.25s ease; --transition-slow: 0.35s ease; --ease-out: cubic-bezier(0, 0, 0.2, 1); /* ---- Dark mode page gradient ---- */ --bg-dark-start: #1A1F27; --bg-dark-end: #151A20; /* ---- Component-specific ---- */ --slider-thumb-size: 28px; --slider-thumb-border: 2.5px solid var(--brand-accent-text); --slider-track-height: 6px; /* ---- Input / hit-target sizing ---- */ --input-height: 48px; --input-padding-y: 12px; --input-padding-x: 14px; --input-border-width: 1.5px; --input-border-color: var(--border-default); /* 3:1 — was --neutral-200 at 1.24:1 */ --input-border-radius: 10px; --input-font-size: var(--text-md); /* 16px — prevents iOS auto-zoom */ /* ---- Component border-radius ---- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 30px; --radius-full: 99px; --radius-round: 50%; /* ---- Card / form wrap ---- */ --card-radius: 16px; /* ---- Inverse navy surfaces (footer, CTA banner, stat panel) ---- These deliberately do NOT flip with the theme. The footer stays a dark navy panel in both modes, so the text tokens below stay valid in both. Do NOT substitute --brand-primary here: it flips to a light blue in dark mode, and white text on it is 2.77:1. */ --surface-navy: #1C2E4A; --surface-navy-lift: #1E3A5C; /* gradient end — non-text */ --on-navy: #FFFFFF; /* 13.64:1 on --surface-navy */ --on-navy-muted: #C6CBD2; /* 8.39:1 — AAA. Replaces the old rgba(255,255,255,0.4) at 3.52:1 */ --accent-on-navy: #7FD5CB; /* 8.01:1 — teal accent on navy */ --border-on-navy: rgba(255,255,255,0.18); /* ---- Rating stars (WCAG 1.4.11 non-text, 3:1) ---- --brand-highlight is 1.59:1 — fails even the non-text floor. */ --star-fill: #B8860B; /* 3.25:1 on white */ } /*======================================== DARK — system preference fallback ========================================*/ @media (prefers-color-scheme: dark) { :root { --logo-b: #6E9EDC; --logo-c: #3F9A90; --logo-text: #6E9EDC; --brand-primary: #6E9EDC; --brand-primary-hover: #5C89C2; --brand-accent: #3F9A90; /* 4.29:1 on --bg-secondary — NON-TEXT */ --brand-accent-hover: #57B0A6; /* AAA text variants (>= 7:1 on #242A32) */ --brand-accent-text: #64C5BA; --brand-accent-text-hover: #85D6CD; --brand-success-text: #44CE63; --brand-warning-text: #E4AC02; --brand-error-text: #FF9898; --bg-primary: #1E2228; --bg-secondary: #242A32; --bg-tertiary: #2C333D; --bg-start: var(--bg-dark-start); --bg-end: var(--bg-dark-end); --bg-success: #17301D; --bg-warning: #33290A; --bg-error: #3A2020; --bg-info: #17302E; --neutral-white: #1E2228; --neutral-50: #242A32; --neutral-100: #2C333D; --neutral-200: #3A424D; --neutral-300: #4A5563; --neutral-400: #6B7280; --neutral-500: #8A95A3; --neutral-600: #B8C1CC; --neutral-700: #E4E7EB; --neutral-black: #FFFFFF; --text-color: #E4E7EB; /* 11.66:1 */ --text-body: #B8C1CC; /* 7.94:1 */ --text-muted: #AEB6BF; /* 7.05:1 */ --text-inverse: #1E2228; --border-default: #626C7A; /* 3.00:1 on #1E2228 */ --border-subtle: var(--neutral-200); --border-strong: var(--neutral-500); --focus-ring-color: var(--brand-accent-text); --focus-ring-contrast: #0B0E12; /* dark second ring for separation on light chips */ --shadow-base: 0, 0, 0; --shadow-light: rgba(0, 0, 0, 0.40); --shadow-med: rgba(0, 0, 0, 0.55); --shadow-strong: rgba(0, 0, 0, 0.70); --shadow-focus: rgba(110, 158, 220, 0.35); --shadow-focus-strong: rgba(110, 158, 220, 0.55); --shadow-accent-sm: rgba(63, 154, 144, 0.20); --shadow-accent-md: rgba(63, 154, 144, 0.30); --shadow-accent-lg: rgba(63, 154, 144, 0.40); --shadow-accent-focus: rgba(63, 154, 144, 0.22); --shadow-primary-sm: rgba(110, 158, 220, 0.18); --shadow-primary-md: rgba(110, 158, 220, 0.26); --surface-navy: #16243A; --surface-navy-lift: #1E3050; --star-fill: #F2C94C; /* 9.88:1 on dark surfaces */ } } /*======================================== EXPLICIT LIGHT [data-theme="light"] ========================================*/ :root[data-theme="light"] { --logo-b: #1C2E4A; --logo-c: #2F7F7A; --logo-text: #1C2E4A; --brand-primary: #1C2E4A; --brand-primary-hover: #274060; --brand-accent: #2F7F7A; --brand-accent-hover: #26706B; --brand-accent-text: #235F5C; --brand-accent-text-hover: #1B4B49; --brand-success-text: #186329; --brand-warning-text: #6E5200; --brand-error-text: #983333; --bg-primary: #FFFFFF; --bg-secondary: #F9FAFB; --bg-tertiary: #F3F3F3; --bg-start: #F9FAFB; --bg-end: #FFFFFF; --bg-success: #EAF6EC; --bg-warning: #FBF3DC; --bg-error: #FBEDED; --bg-info: #E9F2F1; --neutral-white: #FFFFFF; --neutral-50: #F9FAFB; --neutral-100: #F3F3F3; --neutral-200: #E5E7EB; --neutral-300: #D1D5DB; --neutral-400: #9CA3AF; --neutral-500: #6B7280; --neutral-600: #4B5563; --neutral-700: #374151; --neutral-black: #000000; --text-color: var(--neutral-700); --text-body: var(--neutral-600); --text-muted: #515661; --text-inverse: #FFFFFF; --border-default: #929599; --border-subtle: var(--neutral-200); --border-strong: var(--neutral-600); --focus-ring-color: var(--brand-accent-text); --focus-ring-contrast: var(--neutral-white); --shadow-base: 20, 54, 84; --shadow-light: rgba(20, 54, 84, 0.15); --shadow-med: rgba(20, 54, 84, 0.25); --shadow-strong: rgba(20, 54, 84, 0.40); --shadow-focus: rgba(20, 54, 84, 0.25); --shadow-focus-strong: rgba(20, 54, 84, 0.55); --shadow-accent-sm: rgba(47, 127, 122, 0.12); --shadow-accent-md: rgba(47, 127, 122, 0.25); --shadow-accent-lg: rgba(47, 127, 122, 0.35); --shadow-accent-focus: rgba(47, 127, 122, 0.18); --shadow-primary-sm: rgba(28, 46, 74, 0.20); --shadow-primary-md: rgba(28, 46, 74, 0.28); /* ---- Inverse navy surfaces (footer, CTA banner, stat panel) ---- These deliberately do NOT flip with the theme. The footer stays a dark navy panel in both modes, so the text tokens below stay valid in both. Do NOT substitute --brand-primary here: it flips to a light blue in dark mode, and white text on it is 2.77:1. */ --surface-navy: #1C2E4A; --surface-navy-lift: #1E3A5C; /* gradient end — non-text */ --on-navy: #FFFFFF; /* 13.64:1 on --surface-navy */ --on-navy-muted: #C6CBD2; /* 8.39:1 — AAA. Replaces the old rgba(255,255,255,0.4) at 3.52:1 */ --accent-on-navy: #7FD5CB; /* 8.01:1 — teal accent on navy */ --border-on-navy: rgba(255,255,255,0.18); /* ---- Rating stars (WCAG 1.4.11 non-text, 3:1) ---- --brand-highlight is 1.59:1 — fails even the non-text floor. */ --star-fill: #B8860B; /* 3.25:1 on white */ } /*======================================== EXPLICIT DARK [data-theme="dark"] ========================================*/ :root[data-theme="dark"] { --logo-b: #6E9EDC; --logo-c: #3F9A90; --logo-text: #6E9EDC; --brand-primary: #6E9EDC; --brand-primary-hover: #5C89C2; --brand-accent: #3F9A90; --brand-accent-hover: #57B0A6; --brand-accent-text: #64C5BA; --brand-accent-text-hover: #85D6CD; --brand-success-text: #44CE63; --brand-warning-text: #E4AC02; --brand-error-text: #FF9898; --bg-primary: #1E2228; --bg-secondary: #242A32; --bg-tertiary: #2C333D; --bg-start: var(--bg-dark-start); --bg-end: var(--bg-dark-end); --bg-success: #17301D; --bg-warning: #33290A; --bg-error: #3A2020; --bg-info: #17302E; --neutral-white: #1E2228; --neutral-50: #242A32; --neutral-100: #2C333D; --neutral-200: #3A424D; --neutral-300: #4A5563; --neutral-400: #6B7280; --neutral-500: #8A95A3; --neutral-600: #B8C1CC; --neutral-700: #E4E7EB; --neutral-black: #FFFFFF; --text-color: #E4E7EB; --text-body: #B8C1CC; --text-muted: #AEB6BF; --text-inverse: #1E2228; --border-default: #626C7A; --border-subtle: var(--neutral-200); --border-strong: var(--neutral-500); --focus-ring-color: var(--brand-accent-text); --focus-ring-contrast: #0B0E12; --shadow-base: 0, 0, 0; --shadow-light: rgba(0, 0, 0, 0.40); --shadow-med: rgba(0, 0, 0, 0.55); --shadow-strong: rgba(0, 0, 0, 0.70); --shadow-focus: rgba(110, 158, 220, 0.35); --shadow-focus-strong: rgba(110, 158, 220, 0.55); --shadow-accent-sm: rgba(63, 154, 144, 0.20); --shadow-accent-md: rgba(63, 154, 144, 0.30); --shadow-accent-lg: rgba(63, 154, 144, 0.40); --shadow-accent-focus: rgba(63, 154, 144, 0.22); --shadow-primary-sm: rgba(110, 158, 220, 0.18); --shadow-primary-md: rgba(110, 158, 220, 0.26); --surface-navy: #16243A; --surface-navy-lift: #1E3050; --star-fill: #F2C94C; /* 9.88:1 on dark surfaces */ } /*======================================== REDUCED MOTION (WCAG 2.3.3 AAA) Motion tokens collapse to zero. Any CSS using --transition-* inherits this for free. ========================================*/ @media (prefers-reduced-motion: reduce) { :root { --transition-micro: 0s; --transition-fast: 0s; --transition-med: 0s; --transition-slow: 0s; } } /*======================================== INCREASED CONTRAST Users who ask for more contrast get it. ========================================*/ @media (prefers-contrast: more) { :root { --text-color: #1A1F27; --text-body: #1A1F27; --text-muted: #374151; --border-default: #374151; --border-width: 2px; --input-border-width: 2px; --focus-ring-width: 4px; --opacity-muted: 1; } :root[data-theme="dark"] { --text-color: #FFFFFF; --text-body: #FFFFFF; --text-muted: #E4E7EB; --border-default: #E4E7EB; } }