/* ========================================================================== FOCUS — Design tokens -------------------------------------------------------------------------- Modelled on ugandacmf.org, which FOCUS gave as the reference. Values were read from that site's computed styles, not estimated: primary blue #1A5FB4 header ground, buttons, links deep navy #0E3A73 headings, footer ground ink #082347 body text — a blue-black, never pure black gold #F1BA18 FOCUS's own logo gold (UCMF's #F5B51E is a near match, so the brand gold is kept) Contrast (WCAG 2.1): blue on white 6.3:1 AA ✓ text and buttons white on blue 6.3:1 AA ✓ header links navy on white 11.2:1 AAA ✓ headings ink on white 15.6:1 AAA ✓ body gold on navy 5.2:1 AA ✓ accent text on the footer gold on blue 3.5:1 large text only gold on white 1.8:1 FAIL ✗ never text on light ========================================================================== */ :root { /* ---- Blue: the UCMF family -------------------------------------------- */ --navy-50: #EEF4FC; --navy-100: #D9E6F7; --navy-200: #B3CDEF; --navy-300: #7FAAE0; --navy-400: #4A86CF; --navy-500: #1A5FB4; /* ← primary blue (UCMF header) */ --navy-600: #16529C; --navy-700: #0E3A73; /* ← deep navy (UCMF headings, footer) */ --navy-800: #0B2E5C; --navy-900: #082347; /* ← ink (UCMF body text) */ --navy-950: #05172F; /* ---- Gold: the FOCUS logo accent ------------------------------------- */ --gold-50: #FEFAED; --gold-100: #FDF2CC; --gold-200: #FBE49A; --gold-300: #F8D45F; --gold-400: #F1BA18; --gold-500: #DCA40D; --gold-600: #B7830A; --gold-700: #8E640C; --gold-800: #6B4B10; --gold-900: #4A3410; /* ---- Neutrals, cooled toward the blue --------------------------------- */ --ink-0: #FFFFFF; --ink-25: #FBFCFE; --ink-50: #F4F7FB; --ink-100: #EAF0F7; --ink-200: #DBE3EE; --ink-300: #C2CDDC; --ink-400: #94A3B8; --ink-500: #6E83A3; /* UCMF muted */ --ink-600: #3B5680; /* UCMF secondary text */ --ink-700: #2A4266; --ink-800: #1A2E4D; --ink-900: #082347; --ink-950: #05172F; /* ---- Semantic --------------------------------------------------------- */ --bg: var(--ink-0); --bg-subtle: var(--ink-50); --bg-muted: var(--ink-100); --surface: var(--ink-0); --surface-raised: var(--ink-0); --border: var(--ink-200); --border-strong: var(--ink-300); --text: var(--navy-900); --text-heading: var(--navy-700); --text-muted: var(--ink-600); --text-subtle: #56698A; /* 5.5:1 on white — ink-500 alone is only 3.9:1 */ --text-on-dark: #FFFFFF; --text-on-dark-muted: rgba(255, 255, 255, 0.78); --primary: var(--navy-500); --primary-hover: var(--navy-600); --accent: var(--gold-400); --accent-hover: var(--gold-500); --focus-ring: var(--gold-400); /* ---- Grounds ---------------------------------------------------------- */ --grad-paper: linear-gradient(180deg, var(--ink-50) 0%, var(--ink-0) 62%); --grad-dawn: linear-gradient(180deg, var(--ink-0) 0%, var(--navy-50) 100%); --grad-tint: linear-gradient(165deg, var(--navy-50) 0%, var(--ink-0) 55%, var(--navy-50) 100%); --grad-accent: linear-gradient(150deg, var(--gold-50) 0%, var(--ink-0) 48%, var(--navy-50) 100%); --grad-gold: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 50%, var(--gold-500) 100%); --grad-blue: linear-gradient(135deg, var(--navy-500) 0%, var(--navy-600) 55%, var(--navy-700) 100%); --grad-night: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 55%, var(--navy-900) 100%); --grad-royal: var(--grad-blue); --grad-edge: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); --grad-headline: linear-gradient(103deg, var(--gold-300) 0%, var(--gold-400) 42%, #FFE9A8 100%); --aurora: radial-gradient(58% 48% at 14% 8%, rgba(241,186,24,.18) 0%, transparent 62%), radial-gradient(50% 52% at 88% 22%, rgba(74,134,207,.36) 0%, transparent 66%); /* ---- Type: Inter Tight, one variable face ----------------------------- */ --font-display: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; --weight-body: 400; --weight-medium: 500; --weight-semibold: 600; --weight-display: 600; /* UCMF sets headings at 600, not bold */ --weight-display-xl: 700; /* UCMF body is 16px / 1.6. Headings are restrained — their h2 is 40px — so the scale tops out modestly and relies on tracking, not size, for punch. */ --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.80rem); --step--1: clamp(0.86rem, 0.84rem + 0.10vw, 0.92rem); --step-0: clamp(1.00rem, 0.97rem + 0.14vw, 1.06rem); --step-1: clamp(1.12rem, 1.07rem + 0.26vw, 1.28rem); --step-2: clamp(1.32rem, 1.23rem + 0.44vw, 1.60rem); --step-3: clamp(1.52rem, 1.39rem + 0.62vw, 1.92rem); --step-4: clamp(1.76rem, 1.58rem + 0.90vw, 2.34rem); --step-5: clamp(2.00rem, 1.76rem + 1.20vw, 2.76rem); --step-6: clamp(2.30rem, 1.97rem + 1.64vw, 3.34rem); --step-7: clamp(2.64rem, 2.20rem + 2.20vw, 4.04rem); --leading-tight: 1.08; --leading-snug: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.7; --tracking-tight: -0.02em; /* UCMF: -0.64px on a 32px h1 */ --tracking-snug: -0.01em; --tracking-normal: -0.005em; --tracking-wide: 0.02em; --tracking-caps: 0.12em; /* ---- Space ------------------------------------------------------------ */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: clamp(4rem, 3rem + 5vw, 6.5rem); --space-4xl: clamp(5rem, 3.5rem + 7.5vw, 9rem); /* Vertical rhythm for page sections: generous, but never a dead screen. */ --space-section: clamp(3rem, 2.2rem + 3.2vw, 4.75rem); --space-section-tight: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem); /* ---- Layout ----------------------------------------------------------- */ --container: 75rem; /* UCMF: 1200px */ --container-narrow: 46rem; --container-wide: 88rem; --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2rem); --header-h: 5.3rem; /* UCMF: 85px */ /* ---- Radii ------------------------------------------------------------ */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-full: 999px; /* ---- Elevation -------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(8, 35, 71, 0.06); --shadow-sm: 0 2px 8px rgba(8, 35, 71, 0.07), 0 1px 2px rgba(8, 35, 71, 0.05); --shadow-md: 0 10px 24px rgba(8, 35, 71, 0.09), 0 2px 6px rgba(8, 35, 71, 0.05); --shadow-lg: 0 20px 44px rgba(8, 35, 71, 0.12), 0 6px 14px rgba(8, 35, 71, 0.06); --shadow-xl: 0 32px 70px rgba(8, 35, 71, 0.16), 0 10px 24px rgba(8, 35, 71, 0.08); --shadow-gold: 0 12px 30px rgba(241, 186, 24, 0.34); --shadow-blue: 0 12px 30px rgba(26, 95, 180, 0.30); /* ---- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --dur-slower: 700ms; --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; } /* Dark mode is opt-in only, via the header toggle. */ :root[data-theme="dark"] { --bg: var(--navy-950); --bg-subtle: #0A1F3C; --bg-muted: #0E2748; --surface: #0B2140; --surface-raised: #102A4F; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --text: #E8F0FA; --text-heading: #FFFFFF; --text-muted: #A9BCD6; --text-subtle: #8AA0BF; --primary: var(--navy-300); --primary-hover: var(--navy-200); --grad-dawn: linear-gradient(180deg, var(--navy-950) 0%, #0A1F3C 100%); --grad-paper: linear-gradient(180deg, #0A1F3C 0%, var(--navy-950) 60%); --grad-tint: linear-gradient(165deg, #0A1F3C 0%, var(--navy-950) 55%, #0A1F3C 100%); --grad-accent: linear-gradient(150deg, #1A2130 0%, var(--navy-950) 48%, #0A1F3C 100%); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55); --shadow-xl: 0 32px 74px rgba(0, 0, 0, 0.6); }