/* LeapCode — design tokens · Source of truth: Brand Guidelines v2 §8 (BG2) and Design DNA Blueprint · v1.0 (DNA) §2–§4. Every value below cites its source. Values marked · DERIVED are not in either document and were chosen to complete the · system; they are the first things to swap when KZ rules. · Colour budget (DNA C1/C3): Coral means exactly 2 things — an action you · can take, and the mark. Gold is a rule, never a heading (BG2 §8.1). */ :root { /* ---- Colour · house palette (BG2 §8.1) -------------------------------- */ --c-coral: #D44040; /* New Leap Red (Set W, W-7): action colour for links, flat buttons, hero block */ --c-coral-2: #E35252; /* New Leap Red hover */ --c-coral-deep: #D44040; /* Ember: text-safe red, links, white-text buttons (5.09:1) */ --c-ignition: #D44040; /* focus ring, gradient deep end */ --c-flame: #FF9B93; /* gradient light end, kickers on Ink */ --c-blush: #FFF6F7; /* soft content surface */ --grad-ignition: #D44040; /* flat since 1.8.0 (W-7: no gradient) */ --c-ink: #1A1A1A; /* body text */ --c-ink-2: #1A1A1A; /* heading ink = Ink (Brand Manual v2) */ --c-steel: #6B7B82; /* input borders, hairline-adjacent (3:1) */ --c-steel-deep: #5E6D74; /* secondary / muted text, kicker (DNA §4.1) */ --c-gold: #C8962C; /* rules and edges only, never text */ --c-gold-deep: #8E6A1D; /* text-safe gold, kicker variant (DNA §4.1) */ --c-risk: #C00000; /* warnings, unverified figures */ --c-warn: #E07830; /* early warning, decoration only */ --c-warn-deep: #AD5519; /* text-safe warn (DNA §4.1) */ --c-problem: #2F5D7C; /* Slate blue: problem words (W-6/W-7) */ --c-problem-d: #A9C4D8; /* on the dark band */ --c-danger: #A12A2A; /* Deep red: danger words (W-6/W-7) */ --c-hairline: #D9DEDE; /* the house rule line */ /* ---- Colour · the 4 grounds (DNA C4) — no 5th ------------------------- */ --g-paper: #FFFFFF; --g-surface: #FFF6F7; /* "Callout" in BG2 §8.1 */ --g-sunk: #F7F8F8; /* "Zebra" in BG2 §8.1 */ --g-mist: #F7FAFC; /* DNA §4.1; reserved for artefact panels */ --g-anchor: #1A1A1A; /* the 1 dark band (DNA C2) */ --g-anchor-2: #232323; /* dark surface */ --g-anchor-3: #2C2C2C; /* dark raised */ /* ---- Colour · on the Anchor ground (DNA §4.1 "d" pairs) --------------- */ --d-text: #F2F4F4; --d-text-2: #DDE2E3; --d-muted: #A3B0B6; --d-coral: #F07070; /* links and focus on dark */ --d-gold: #D9A83F; --d-risk: #F07A72; --d-warn: #E89A57; --d-hairline: #363636; /* ---- Colour · BSC LEAP accents — scorecard artefacts only (BG2 §8.1) -- */ --a-legacy: #1A6DAF; --a-evolution: #CC4449; --a-evolution-deep: #A34243; /* Registry Evolution W4 (H35); was DERIVED #BE3A3F (W-8, DR-21) */ --a-abundance: #11B890; --a-abundance-deep: #05785D; /* Registry Abundance W4 (H36); was DERIVED #0B7C61 */ --a-process: #3D3D4A; --a-legacy-deep: #136AAC; /* Registry Legacy W4 (H34); new */ --a-process-deep: #646476; /* Registry Process W4 (H37); new */ /* ---- Semantic aliases (what components consume) ----------------------- */ --bg: var(--g-paper); --bg-tint: var(--g-surface); --bg-sunk: var(--g-sunk); --fg: var(--c-ink); --fg-heading: var(--c-ink-2); --fg-muted: var(--c-steel-deep); --line: var(--c-hairline); --line-strong: var(--c-steel); --link: var(--c-coral-deep); --focus: var(--c-ignition); --rule: var(--c-gold); --action: var(--c-coral); --action-fg: var(--c-ink); /* DNA Decision 1, recommended: mark coral + Ink label */ --action-hover: var(--c-coral-2); /* ---- Type (BG2 §8.2; DNA T1–T4) --------------------------------------- */ /* Source Sans 3 for headings and body, Source Serif 4 italic as accent; self-hosted (assets/fonts, shell.css). Web fallback stack is DERIVED (DNA Decision 5: Calibri is a desktop font). */ --font-heading: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif; /* BG2 §8.2 */ --font-arabic: "Cairo", "Zain", "Noto Naskh Arabic", serif; /* BG2 T-34: BJ rules until KZ does */ --w-regular: 400; --w-medium: 500; /* Inter only */ --w-semibold: 600; /* kickers, buttons */ --w-bold: 700; /* H1, H2 — nothing at 800/900 (DNA T4) */ /* Scale: H1 = 56–60px over 18px body at desktop (DNA T1, 3.0–3.4×). Body ≥ 16px; nothing anywhere below 14px (DNA §4 row 7). */ --fs-body: 1.125rem; /* 18px at every width (DR-16 v2.0.2, KZ 7 Nov 2026) */ --fs-small: 0.875rem; /* 14px — the floor */ --fs-kicker: 0.875rem; --fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); /* 36 → 60px */ --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); /* 28 → 40px */ --fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); /* 22 → 26px */ --fs-h4: 1.25rem; /* 20px */ --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18 → 22px */ --fs-display: clamp(2.75rem, 1.5rem + 5vw, 5rem); /* audited numerals only (DNA T5) */ --lh-body: 1.6; /* DNA §5.1 */ --lh-tight: 1.1; --lh-heading: 1.15; --ls-kicker: 0.08em; /* DNA T2 */ --measure: 68ch; /* body 62–72ch (DNA T3); centred blocks ≤ 68ch (DNA §3.3) */ --measure-wide: 72ch; /* ---- Space · 8px grid (DNA §5.2) -------------------------------------- */ --s-1: 0.25rem; /* 4px */ --s-2: 0.5rem; /* 8px */ --s-3: 0.75rem; /* 12px */ --s-4: 1rem; /* 16px */ --s-5: 1.5rem; /* 24px — grid gutter (DNA R5) */ --s-6: 2rem; /* 32px */ --s-7: 3rem; /* 48px */ --s-8: 4rem; /* 64px — header height (DNA A3) */ --s-9: 6rem; /* 96px — section padding, mobile (DNA R2) */ --s-10: 10rem; /* 160px — section padding, desktop (DNA R2) */ --section-pad: var(--s-9); --gutter: var(--s-4); /* ≥ 16px side gutter at every width (DNA §4 row 5) */ --container: 75rem; /* 1200px, 12-col (DNA R5) */ --header-h: var(--s-8); /* ---- Radius · border · shadow (DNA R6) -------------------------------- */ --r-card: 8px; --r-ctl: 6px; /* buttons, inputs */ --r-max: 12px; /* never above this */ --r-pill: 999px; /* DERIVED: segmented control only */ --bw: 1px; --shadow-raised: 0 1px 2px rgba(26, 26, 26, 0.06), 0 4px 12px rgba(26, 26, 26, 0.06); /* genuinely raised surfaces only */ /* ---- Focus (DNA §4 row 3) -------------------------------------------- */ --focus-w: 3px; --focus-offset: 2px; /* ---- Motion (DNA M1–M4) — settle, never launch ------------------------ */ --ease-settle: cubic-bezier(0.2, 0.6, 0.2, 1); --dur-settle: 240ms; --dur-fade: 200ms; /* sticky-CTA fade (DNA A3) */ --dur-hover: 120ms; /* DERIVED: hover/focus colour change */ --rise: 12px; /* ---- Tap targets (DNA §4 row 6) --------------------------------------- */ --tap: 44px; color-scheme: light; } @media (min-width: 64em) { :root { --section-pad: var(--s-10); } } @media (min-width: 40em) { :root { --gutter: var(--s-5); } } /* Dark scheme: NOT applied automatically. The guidelines specify no site dark mode, and the pages carry light surfaces set in their own styles, so following the visitor's OS dark setting turned text light on white (text vanished). The site stays in its light design; the one dark band is the Anchor. A real dark theme needs its own approved design. An explicit opt-in below stays for a future page: . */ :root[data-theme="dark"] { --bg: var(--g-anchor); --bg-tint: var(--g-anchor-2); --bg-sunk: var(--g-anchor-3); --fg: var(--d-text); --fg-heading: var(--d-text); --fg-muted: var(--d-muted); --line: var(--d-hairline); --line-strong: var(--d-muted); --link: var(--d-coral); --focus: var(--c-ignition); --rule: var(--d-gold); --action: var(--c-coral); --action-fg: var(--g-anchor); --action-hover: var(--c-coral-2); --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35); color-scheme: dark; }