/* ============================================================ GOLDMAN — tokens.css CUSTOM PROPERTIES ONLY. No selectors beyond :root, no rules. Every colour in the project resolves here. Never hard-code a hex value in style.css or in a template. Source of record: PRD 01 §2, Emergent brief §2.2. ============================================================ */ :root { /* --- Ground ------------------------------------------------- Warm paper, taken from the box stock. The packaging is predominantly white; the site is the same. Black is used as a contained panel, never as the page. */ --gm-paper: #FBFAF7; /* page base */ --gm-champagne: #F6F1E4; /* alternating section — honeycomb tint */ --gm-mist: #EDE9DF; /* borders, dividers, table zebra */ --gm-card: #FFFFFF; /* cards, panels, form fields */ /* --- Dark — contained panels only --------------------------- */ --gm-obsidian: #0B0F15; --gm-obsidian-2: #141922; /* cards sitting on obsidian */ /* --- Ink ---------------------------------------------------- */ --gm-ink: #14181F; /* headings */ --gm-graphite: #464E5C; /* body copy */ /* PRD 01 §2 specifies #78808D for slate. It measures 3.29:1 on --gm-mist and 3.98:1 on --gm-card, and AA requires 4.5:1 for text under 24px — so every caption, help text, table label and meta line on the site failed. Darkened to clear 4.5:1 on the lightest ground it is used on (worst case 4.71:1 on --gm-card) while keeping the cool grey it was chosen for. */ --gm-slate: #5F6773; /* captions, meta — AA-corrected */ /* --- Gold — TWO FAMILIES. See THE GOLD RULE below. ----------- */ --gm-gold: #C9A227; /* rules, fills, icons, logo, text >=24px */ --gm-gold-text: #6E5111; /* ANY text under 24px on a light ground */ --gm-gold-lite: #E8D48B; --gm-gold-deep: #8C6A1A; --gm-gold-grad: linear-gradient(160deg, #E8D48B 0%, #C9A227 45%, #8C6A1A 100%); --gm-gold-wash: rgba(201, 162, 39, .08); /* THE GOLD RULE — corrected. ------------------------------------------------------------------ PRD 01 §2 and the Emergent brief §2.3 contradict themselves here. Both state, correctly, that --gm-gold on --gm-paper measures 2.4:1 and "fails accessibility for small AND for large text" — and both then permit it for "display text at 24px and above". It does not pass at 24px either. AA large text needs 3:1, and --gm-gold measures 2.00-2.42:1 across the four light grounds. The quality bar is WCAG 2.1 AA, so AA wins over the permission. ON A LIGHT GROUND: --gm-gold borders, rules, fills, icon strokes, the logo. NEVER text, at any size. --gm-gold-deep display text >= 24px (4.13:1 worst case). --gm-gold-text any text under 24px (6.08:1 worst case). ON --gm-obsidian: --gm-gold 7.94:1 — legal as text at any size. */ /* --- Structure ---------------------------------------------- */ --gm-hairline: rgba(201, 162, 39, .34); --gm-edge: rgba(20, 24, 31, .10); --gm-edge-soft: rgba(20, 24, 31, .06); --gm-edge-dark: rgba(251, 250, 247, .13); /* edges on obsidian */ /* --- Elevation ---------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(20, 24, 31, .05); --shadow-md: 0 4px 16px rgba(20, 24, 31, .07); --shadow-lg: 0 16px 48px rgba(20, 24, 31, .10); /* --- Type families ------------------------------------------ Saira squared-terminal grotesk. Display + every tracked uppercase label. Echoes the machined wordmark. Manrope body copy. JetBrains Mono specification figures, warranty numbers, depth markers. Always tabular-nums. */ --ff-display: 'Saira', 'Helvetica Neue', Arial, sans-serif; --ff-label: 'Saira', 'Helvetica Neue', Arial, sans-serif; --ff-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* --- Type scale ---------------------------------------------- */ --fs-display-xl: clamp(2.75rem, 6.5vw, 5rem); /* hero H1, lh .96 */ --fs-display-l: clamp(1.875rem, 4vw, 3rem); /* H2, lh 1.06 */ --fs-display-m: clamp(1.375rem, 2.4vw, 1.875rem); /* H3 */ --fs-display-s: clamp(1.125rem, 1.6vw, 1.375rem); /* H4 */ --fs-eyebrow: .6875rem; /* 11px — never smaller */ --fs-body-l: 1.0625rem; /* 17px, lh 1.68 */ --fs-body: 1rem; /* lh 1.7 */ --fs-caption: .8125rem; /* 13px */ --fs-data: .9375rem; /* 15px */ --fs-data-s: .8125rem; --lh-display: .96; --lh-h2: 1.06; --lh-h3: 1.18; --lh-body: 1.7; --lh-body-l: 1.68; --tracking-label: .18em; /* the packaging's tracked-out caps */ --tracking-tight: -.02em; /* --- Spacing — 8px scale ------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 160px; --section-y: clamp(72px, 9vw, 144px); /* --- Container — stepped max-widths, declared per breakpoint in style.css. There is no single container value. ----------- */ --container: 100%; --container-wide: 1440px; /* site header only */ --container-pad: clamp(1.25rem, 4vw, 3rem); --measure: 68ch; /* body copy cap */ /* --- Radius — 2px on everything ----------------------------- The packaging is machined and hard-edged. This is load-bearing: it is most of what makes the site read as engineered rather than templated. No pill buttons, no soft cards. */ --radius: 2px; /* --- Motion -------------------------------------------------- No overshoot. No back, elastic or bounce — PRD 01 §5.3. */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-inout: cubic-bezier(.45, .05, .55, .95); --dur-fast: 220ms; --dur-base: 280ms; --dur-slow: 600ms; /* --- Focus ring — 2px gold, 2px offset, on every interactive element. Never outline:none without a replacement. --------- */ --focus-ring: 2px solid var(--gm-gold); --focus-offset: 2px; /* --- Z-index scale ------------------------------------------- */ --z-header: 1000; --z-mega: 1010; --z-overlay: 1020; --z-skiplink: 1100; } /* Stepped container max-widths — PRD 01 §2. Every layout breakpoint in style.css must land on one of these steps. A two-column split at 900px sits inside a 720px container and gives each column ~300px, which is not a column. */ @media (min-width: 576px) { :root { --container: 540px; } } @media (min-width: 768px) { :root { --container: 720px; } } @media (min-width: 992px) { :root { --container: 960px; } } @media (min-width: 1200px) { :root { --container: 1140px; } } @media (min-width: 1400px) { :root { --container: 1320px; } }