/* ============================================================ Zone Ten AI — Design Tokens · DIRECTION A "WARM HUMANIST" ------------------------------------------------------------ Chosen by Mr Lavelle 2026-07-18 from the three-option type board. Brand colours stay as locked in "Zone Ten AI — Brand Identity Decision 2026-07-18.md": Warm White #FAF5F2 · Signal Orange #F78B14 · and the wordmark's Instrument Black, which is used FOR THE WORDMARK. Two deliberate departures from that raster spec, both because the locked doc describes a LOGO, not a page: 1. Page ink is warmed to #241E1B. Near-black #070707 across a whole page read as clinical — the specific thing that was rejected. 2. The ultra-light extended face is logo-only. Headlines run Figtree in sentence case. The brand doc's own usage rules say not to substitute a stock font for the wordmark; that cuts both ways — the wordmark's face is not a page typeface either. Nothing outside this file declares a raw colour value. ============================================================ */ :root { /* ---- Brand ---- */ --bg: #FAF5F2; /* warm white — locked */ --signal: #F79324; /* signal orange — locked. This is the standardised production value from the vector master; #F78B14 was an earlier sample off the raster and is retired. */ --ink: #241E1B; /* warm near-black (15.20:1 on bg) */ /* Orange as TEXT needs deepening — raw signal is 2.2:1 on warm white. #AD5500 cleared AA on --bg (4.76:1) but NOT on the tinted grounds it is actually used on: --tint 4.44:1, --signal-wash 4.35:1, --tint-deep 4.06:1 — all under 4.5:1 (WCAG 1.4.3). #A05000 clears every ground this site paints: --surface 5.77 · --bg 5.33 · --tint 4.96 --signal-wash 4.87 · --tint-deep 4.54 Raw signal stays for fills, dots, ticks and rules. */ --signal-text: #A05000; /* ---- Neutrals ---- */ --surface: #FFFFFF; --muted: #6A5F59; /* 5.72:1 on --bg; worst ground --tint-deep 4.87:1 — passes, unchanged */ --faint: #6F635C; /* was #796C65, which passed on --bg (4.68:1) but failed on --tint (4.36:1) and --tint-deep (3.99:1). #6F635C: --surface 5.81 · --bg 5.37 · --tint 5.00 --signal-wash 4.90 · --tint-deep 4.58 */ --rule: color-mix(in srgb, var(--ink) 13%, transparent); --rule-strong: color-mix(in srgb, var(--ink) 26%, transparent); --rule-hair: color-mix(in srgb, var(--ink) 8%, transparent); /* ---- Interactive / control colours (WCAG 1.4.11, needs 3:1) ---- --rule-strong resolves to #C6C4C4 on white = 1.74:1. Fine as a decorative card edge (a card is identifiable from its content, so 1.4.11 does not apply), but NOT where the border is the only thing defining a control: field boxes, the chip tick box, the burger button, the ghost button. --field-border #877E79 measured against every ground it can sit on: --surface 3.97 · --bg 3.67 · --tint 3.42 --signal-wash 3.35 · --tint-deep 3.13 — all >= 3:1. */ --field-border: #877E79; /* Same job on the inverted band. --dark-rule is 1.75:1 on --dark-bg. */ --field-border-dark: #8A827E; /* 4.09:1 on --dark-bg */ /* Focus ring. The old ring was --signal: 2.29:1 on white, 2.12:1 on --bg — WEAKER than the UA default ring it replaced, which is a 1.4.11 failure in its own right. Ink is 16.45:1 on --surface, 15.20:1 on --bg, 14.16:1 on --tint. Re-declared to --dark-ink inside dark scopes (14.23:1 on --dark-bg). */ --focus: var(--ink); /* Disabled affordances. Previously drawn with opacity:.45, which put the ghost button at 2.80:1 on --surface. A real value instead — --surface 5.28 · --bg 4.88 · --tint 4.55. */ --disabled-ink: #736A64; /* Inline form validation. #B3261E — --surface 6.54 · --bg 6.04 · --tint 5.63. Clears 4.5:1 as text and 3:1 as a control border. */ --error: #B3261E; /* Warm tints — the ground that keeps this from reading clinical */ --tint: #F3EDE7; /* oat, for alternating bands */ --tint-deep: #EBE3DB; --signal-wash: color-mix(in srgb, var(--signal) 12%, var(--bg)); /* Inverted band — warm charcoal, not black */ --dark-bg: #2B2320; --dark-ink: #FAF5F2; --dark-muted: color-mix(in srgb, var(--dark-ink) 68%, var(--dark-bg)); --dark-rule: color-mix(in srgb, var(--dark-ink) 18%, transparent); /* ---- Type ---- */ --font-display: "Figtree", system-ui, -apple-system, sans-serif; --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif; /* Sentence case throughout. Weight and size carry hierarchy — not tracking, not caps. */ --w-display: 600; --w-label: 600; --w-body: 400; --track-tight: -0.02em; /* large display */ --track-label: 0.11em; /* small caps labels — the one place caps still earns its keep */ /* Fluid scale, clamped 375px → 1440px */ --text-xs: clamp(0.80rem, 0.78rem + 0.09vw, 0.85rem); --text-sm: clamp(0.90rem, 0.88rem + 0.10vw, 0.95rem); --text-base: clamp(1.00rem, 0.97rem + 0.14vw, 1.09rem); --text-md: clamp(1.09rem, 1.04rem + 0.22vw, 1.25rem); --text-lg: clamp(1.28rem, 1.18rem + 0.42vw, 1.60rem); --text-xl: clamp(1.55rem, 1.35rem + 0.82vw, 2.10rem); --text-2xl: clamp(1.90rem, 1.58rem + 1.35vw, 2.85rem); --text-3xl: clamp(2.30rem, 1.80rem + 2.10vw, 3.70rem); --text-hero: clamp(2.35rem, 1.75rem + 2.60vw, 4.00rem); /* ---- Structure ---- */ --grid-max: 1240px; /* Header height as a single shared rem value. It was hardcoded twice in px — .header-inner{min-height:72px} and the mobile drawer's inset:72px — which desynchronised at 200% text zoom (the header grew, the drawer did not, and the first nav item slid underneath). In rem both scale together. Also drives scroll-padding-top so a tabbed-to target is never parked under the sticky header. */ --header-h: 4.5rem; /* 72px at the 16px default root */ --gutter: clamp(1.15rem, 3.4vw, 2.6rem); --cell-pad: clamp(1.3rem, 2.3vw, 2.1rem); --band: clamp(3.8rem, 7.5vw, 7rem); --band-tight: clamp(2.6rem, 5vw, 4.6rem); /* Softened, not sharp — the flat/zero-radius system was part of what read as cold. Small radius only; still no heavy shadows. */ --radius: 6px; --radius-lg: 10px; --shadow: 0 1px 2px rgba(36,30,27,.05), 0 8px 24px rgba(36,30,27,.06); }