/* ========================================================================== Foreground — design tokens -------------------------------------------------------------------------- The rebrand layer. To change the site's colours or typefaces, edit this file only; nothing below it hard-codes a colour or a font name. Colour ramps and the audited contrast bridge are carried over from the Latent design system, whose contrast ratios were measured rather than assumed. Type and spacing come from the page designs, which diverge from that system deliberately (see docs/03-style-inventory.md section 6). data-theme is a SECTION-SCOPING attribute, not a user preference. The page root is light; the header, heroes and footer are dark blocks nested inside it. It is deliberately not wired to prefers-color-scheme — there is no theme toggle on this site. ========================================================================== */ /* --- Colour ramps ------------------------------------------------------- */ :root { --ink-50: #f2f3f8; --ink-100: #e1e3ef; --ink-200: #c6cbe7; --ink-300: #a5aeda; --ink-400: #818ecb; --ink-500: #5d6dbb; --ink-600: #4655a5; --ink-700: #384485; --ink-800: #2d3661; --ink-900: #181d38; --neutral-400: #9fa1ad; --neutral-500: #838695; --neutral-600: #6c6f7f; --neutral-700: #575966; --accent-300: #ec93e5; --accent-400: #e467db; --accent-500: #dc3cd1; --accent-600: #d626c9; --accent-700: #a01c97; --accent-2-600: #17d9e0; --accent-2-800: #14777b; --accent-3-500: #c3f53d; --accent-3-600: #a6df0b; --accent-3-700: #85b309; --accent-3-800: #61800f; } /* --- Brand values ------------------------------------------------------- */ :root { --color-bg: #131a3d; --color-surface: #f5f4f8; --color-surface-2: #1c234c; --color-fg: #f3f2f7; --color-fg-muted: #9099c2; --color-fg-on-light: #181c33; --color-fg-muted-on-light: #4b58a0; --color-accent-2: #17d9e0; --color-border: #2a3266; --color-border-strong: #3c4680; --color-border-on-light: #d2d1d8; /* Audited: measured contrast, not assumed. */ --color-accent-on-dark: #ec93e5; --color-accent-on-light: #a01c97; --color-accent-on-dark-lg: #dc3cd1; --color-accent-on-light-lg: #d626c9; --color-on-accent-dark-ctx: #ffffff; /* The designs step accent-3 down two stops from the system default so it holds up as a hairline rule on light grounds. */ --color-accent-3: var(--accent-3-600); } /* --- Semantic layer, resolved per theme scope --------------------------- * * Derived state values are declared inside each theme block rather than on * a universal selector, so they recompute correctly when a dark section is * nested inside the light page. * ----------------------------------------------------------------------- */ :root, [data-theme="dark"] { --surface-page: var(--color-bg); --surface-card: var(--color-surface-2); --surface-sunken: #0d1330; --surface-band: var(--ink-100); --text-heading: var(--color-fg); --text-body: var(--color-fg); --text-muted: var(--color-fg-muted); --border-subtle: var(--color-border); --border-strong: var(--color-border-strong); /* ACCESSIBILITY CORRECTION — see docs/04-css.md. The design system pairs a white label with --accent-500 (#dc3cd1) on dark grounds and its own comment marks that pairing "not audited". Measured, it is 3.74:1 — below the 4.5:1 that WCAG 1.4.3 requires for body-size text. Two changes fix it while keeping the design's white-on-magenta look: 1. the fill is deepened one step to #c824bb -> label 4.74:1 2. hover/active mix toward the page rather than toward white (see --fill-mix below), because brightening a fill that carries white text is what destroyed contrast on interaction: 2.92:1 hover, 2.40:1 active. Now: rest 4.74:1, hover 5.92:1, active 7.19:1. Fill against the page is 3.56:1 at rest, clearing 1.4.11. Revert by restoring var(--accent-500) and --fill-mix: #ffffff. */ --interactive: #c824bb; --interactive-contrast: var(--color-on-accent-dark-ctx); --accent-text: var(--color-accent-on-dark); --accent-text-lg: var(--color-accent-on-dark-lg); --accent-2-text: var(--accent-2-600); --accent-3-text: var(--accent-3-500); --color-error: #f2495c; --disabled-fg: var(--ink-300); --state-mix: #ffffff; /* Interactive fills darken on hover in dark contexts — see the note above. */ --fill-mix: var(--color-bg); /* Hero lead copy sits over the background motif, where --text-muted (#9099c2) measured as low as 2.57:1 against the brightest linework. --ink-200 lifts that to 4.48:1 on Home and 5.14:1 on About while staying clearly subordinate to the near-white headline. Paired with --hero-lead-halo below. */ --hero-lead: var(--ink-200); /* A zero-offset halo in the page ground. Invisible over flat navy — it only does work where the motif is busy, which is exactly where the contrast problem is. Two stacked shadows rather than one heavier blur: it builds density close to the letterform without spreading a visible smudge. Takes the worst case from 4.48:1 to 6.37:1. See docs/06-qa.md finding 4. */ --hero-lead-halo: 0 0 14px var(--color-bg), 0 0 14px var(--color-bg); /* Audited component roles for this theme. */ --border-interactive: var(--ink-500); --text-muted-on-card: var(--ink-300); --link-on-card: var(--accent-400); --text-muted-on-input: var(--neutral-400); --border-input: var(--neutral-700); --focus-ring-on-card: var(--accent-500); /* Derived states. */ --interactive-hover: color-mix(in oklab, var(--interactive) 84%, var(--fill-mix)); --interactive-active: color-mix(in oklab, var(--interactive) 70%, var(--fill-mix)); --accent-text-hover: color-mix(in oklab, var(--accent-text) 84%, var(--state-mix)); --accent-text-active: color-mix(in oklab, var(--accent-text) 70%, var(--state-mix)); --accent-text-subtle: color-mix(in oklab, var(--accent-text) 14%, transparent); --disabled-bg: color-mix(in oklab, var(--disabled-fg) 14%, transparent); --disabled-border: color-mix(in oklab, var(--disabled-fg) 55%, transparent); --border-focus: var(--accent-text); --focus-ring-color: var(--accent-text); --link: var(--accent-text); --link-hover: var(--accent-text-hover); } [data-theme="light"] { --surface-page: var(--color-surface); --surface-card: #ffffff; --surface-sunken: var(--ink-50); --surface-band: var(--ink-100); --text-heading: var(--color-fg-on-light); --text-body: var(--color-fg-on-light); --text-muted: var(--color-fg-muted-on-light); --border-subtle: var(--color-border-on-light); --border-strong: var(--ink-300); --interactive: var(--color-accent-on-light); --interactive-contrast: #ffffff; --accent-text: var(--color-accent-on-light); --accent-text-lg: var(--color-accent-on-light-lg); --accent-2-text: var(--accent-2-800); --accent-3-text: var(--accent-3-700); --color-error: #db1026; --disabled-fg: var(--ink-600); --state-mix: #000000; --fill-mix: #000000; --border-interactive: var(--ink-500); --text-muted-on-card: var(--ink-500); --link-on-card: var(--accent-700); --text-muted-on-input: var(--neutral-600); --border-input: var(--neutral-500); --focus-ring-on-card: var(--accent-500); --interactive-hover: color-mix(in oklab, var(--interactive) 84%, var(--fill-mix)); --interactive-active: color-mix(in oklab, var(--interactive) 70%, var(--fill-mix)); --accent-text-hover: color-mix(in oklab, var(--accent-text) 84%, var(--state-mix)); --accent-text-active: color-mix(in oklab, var(--accent-text) 70%, var(--state-mix)); --accent-text-subtle: color-mix(in oklab, var(--accent-text) 14%, transparent); --disabled-bg: color-mix(in oklab, var(--disabled-fg) 14%, transparent); --disabled-border: color-mix(in oklab, var(--disabled-fg) 55%, transparent); --border-focus: var(--accent-text); --focus-ring-color: var(--accent-text); --link: var(--accent-text); --link-hover: var(--accent-text-hover); } /* --- Typography --------------------------------------------------------- * * Prata ships Regular only, so display type is weight 400 everywhere. The * design system specifies 700, which would render as a synthesised fake bold. * ----------------------------------------------------------------------- */ :root { --font-display: 'Prata', Georgia, 'Times New Roman', serif; --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Line-height scale — 10 steps, collapsed from 21 in the designs. */ --lh-tight: 1.15; /* page headlines */ --lh-snug: 1.2; /* names, utility headlines */ --lh-card: 1.25; --lh-display: 1.3; --lh-display-loose: 1.35; --lh-display-relaxed: 1.4; --lh-compact: 1.5; --lh-normal: 1.6; --lh-relaxed: 1.65; --lh-prose: 1.7; /* Fluid display sizes. */ --fs-hero: clamp(34px, 5.2vw, 56px); --fs-hero-sm: clamp(30px, 4.4vw, 48px); /* about + 404/thanks */ --fs-hero-contact: clamp(32px, 4.8vw, 50px); --fs-display-lg: clamp(21px, 2.5vw, 30px); --fs-display-md: clamp(21px, 2.4vw, 28px); --fs-display-sm: clamp(20px, 2.3vw, 27px); --fs-display-xs: clamp(20px, 2.3vw, 26px); --fs-card-title: clamp(20px, 2.1vw, 24px); --fs-name: clamp(24px, 2.8vw, 32px); /* Fluid lead paragraphs. */ --fs-lead: clamp(17px, 1.8vw, 20px); --fs-lead-sm: clamp(16.5px, 1.7vw, 19px); --fs-lead-xs: clamp(16.5px, 1.7vw, 18px); /* Fixed sizes. */ --fs-principle: 19px; --fs-body: 16.5px; --fs-body-sm: 15.5px; --fs-question: 16px; --fs-nav: 15px; --fs-label: 13px; --tracking-tight: -0.01em; --tracking-caps: 0.08em; } /* --- Space, containers, shape, motion ----------------------------------- */ :root { --gutter: clamp(20px, 5vw, 64px); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 14px; --space-5: 18px; --space-6: 22px; --space-7: 24px; --space-8: 28px; --space-9: 32px; /* Container widths set line length, so each is a typographic decision. */ --container-utility: 620px; --container-form: 660px; /* 770px, not the 720px written in the design. The design project ships no CSS reset, so its cards are content-box and `max-width: 720px` sizes the CONTENT — rendering a 770px card (720 + 2x24 padding + 2x1 border). This build uses the standard border-box reset, so the token has to carry the full border-box width for the question rows to come out at the design's 720px. Measured, not guessed. */ --container-questions: 770px; --container-prose: 860px; --container-hero: 880px; --container-hero-lg: 900px; --container-people: 1100px; --container-wide: 1180px; --radius-card: 4px; --radius-input: 4px; --radius-button: 999px; --border-width-button: 2.5px; --border-width-input: 1.5px; --border-width-accent: 3px; --border-width-rule: 2px; --shadow-sm: 0 2px 8px rgba(10, 14, 40, 0.16); --focus-ring-width: 3px; --focus-ring-offset: 2px; --hit-target-min: 44px; /* Measured, not guessed: the sticky header is 84px at every width except the narrowest, where the brand and nav wrap onto two rows and it becomes 127px. Used to keep focused elements clear of it (WCAG 2.4.11). */ --header-height: 84px; --duration-fast: 180ms; --duration-base: 320ms; --ease-standard: cubic-bezier(.4, 0, .2, 1); --transition-interactive: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); --transition-surface: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } /* Measured: the header wraps to two rows between 370px and 375px. The breakpoint is set at 400px rather than 372px deliberately — falling back to the taller value slightly early only over-scrolls by a few pixels, whereas being a few pixels late hides focused content behind the bar and fails SC 2.4.11. Fallback-font metrics can also shift the wrap point before the webfonts load, so the generous side is the safe side. */ @media (max-width: 400px) { :root { --header-height: 127px; } }