/* ============================================================================ THE SEQUENCE, GLOBAL DESIGN TOKENS ---------------------------------------------------------------------------- Built 25 September 2026 from a full audit of the live stylesheets. WHAT THIS FIXES. The audit of style.css plus pages.css found: 51 distinct font sizes, 30 of them one-off clamp() values (every heading different) 16 distinct border-radius values, only 3 of which were tokens 41 distinct box-shadow declarations, no scale at all 23 distinct spacing values, off a broken 4px grid 12 distinct transition durations 10 distinct media query breakpoints 19 hex colours, several duplicating each other (#fff and #ffffff, #050505 already a token) HOW THIS IS SAFE. This file is PURELY ADDITIVE and loads BEFORE style.css. Every token name that already existed (--ink, --gradient, --font, --container, --radius-card, --radius-large, --radius-pill, and the --grad-* ramp) is preserved with its exact original value, so nothing currently rendering can break. New scales sit alongside. Migration is page by page, verified by screenshot. ORDER OF USE. Reach for semantic tokens first (--color-text, --space-section). Drop to primitives (--grey-900, --space-6) only when no semantic token fits. ========================================================================== */ :root { /* ========================================================================== 1. COLOUR PRIMITIVES The raw ramp. Do not use these directly in components, use the semantic aliases in section 2. Values below match what is already live. ========================================================================== */ --ink: #050505; --ink-head: #050505; /* heading colour; dark grounds flip this */ /* live value, preserved */ --ink-soft: #0B0B0F; /* live value, preserved */ --charcoal: #17171C; /* live value, preserved */ --ink-raised: #0D0D10; /* was a loose hex in style.css, now named */ --paper: #FFFFFF; /* live value, preserved */ --off-white: #F7F7F8; /* live value, preserved */ --warm-off-white: #F4F1EC; /* live value, preserved */ --grey-text: #6B6B76; /* live value, preserved */ --ink-body: #3F3F49; /* body copy: softer than --ink, darker than --grey-text */ --border: #E2E2E7; /* live value, preserved */ --border-on-ink: rgba(255, 255, 255, 0.10); /* Brand gradient ramp, preserved exactly */ --grad-orange: #FF7A2F; --grad-coral: #FF5B5F; --grad-pink: #FF3E91; --grad-magenta: #D83DFF; --grad-purple: #7A4DFF; --grad-pink-deep: #C01A66; /* was a loose hex, now named */ --gradient: linear-gradient(90deg, var(--grad-orange) 0%, var(--grad-coral) 25%, var(--grad-pink) 50%, var(--grad-magenta) 75%, var(--grad-purple) 100%); --gradient-soft: linear-gradient(135deg, rgba(255,122,47,0.12) 0%, rgba(255,62,145,0.10) 50%, rgba(122,77,255,0.14) 100%); /* Status. Green and amber were loose hexes in the live CSS. */ --success: #22C55E; --warning: #F5A623; --danger: #FF5B5F; /* reuses the coral so status never clashes with brand */ /* ========================================================================== 2. SEMANTIC COLOUR What components should actually reference. Swapping a theme means rewriting this block only, never the components. ========================================================================== */ --color-bg: var(--paper); --color-bg-subtle: var(--off-white); --color-bg-warm: var(--warm-off-white); --color-bg-inverse: var(--ink); --color-surface: var(--paper); --color-surface-raised: var(--paper); --color-surface-inverse: var(--ink-soft); --color-text: var(--ink); --color-text-muted: var(--grey-text); --color-text-inverse: var(--paper); --color-text-on-ink: rgba(255, 255, 255, 0.72); --color-border: var(--border); --color-border-strong: #CFCFD6; --color-border-inverse: var(--border-on-ink); --color-accent: var(--grad-pink); --color-accent-warm: var(--grad-orange); --color-accent-cool: var(--grad-purple); --color-focus: var(--grad-magenta); /* ========================================================================== 3. TYPE Family and weight preserved. The scale below collapses 51 live font sizes onto 7 fixed UI steps plus 10 fluid display steps. Small text is deliberately NOT fluid: 11px must stay 11px and legible. ========================================================================== */ --font: 'Poppins', system-ui, -apple-system, sans-serif; /* preserved */ --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Weights. The live CSS used 300, 400, 500, 600, 700 and 750. 300 and 750 appeared once each and are dropped. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* the workhorse, 92 uses in the live CSS */ --weight-bold: 700; /* UI scale, fixed. Maps the live 10 to 18px cluster onto 7 rungs. */ --text-3xs: 11px; /* eyebrows, micro labels. Absorbs the live 10px and 11px */ --text-2xs: 12px; /* absorbs 12px and 12.5px */ --text-xs: 13px; --text-sm: 14px; /* body default, the most used size on the site */ --text-base: 16px; --text-lg: 18px; /* absorbs 17px and 18px */ --text-xl: 20px; /* Display scale, fluid between a 320px and a 1400px viewport. Replaces 30 one-off clamp() values. */ --display-2xs: clamp(18px, 1.6vw, 22px); --display-xs: clamp(20px, 2.0vw, 26px); --display-sm: clamp(22px, 2.4vw, 30px); --display-md: clamp(26px, 2.8vw, 36px); --display-lg: clamp(28px, 3.2vw, 42px); --display-xl: clamp(32px, 3.8vw, 52px); --display-2xl: clamp(36px, 4.4vw, 64px); --display-3xl: clamp(44px, 6.0vw, 88px); --display-mega: clamp(96px, 11vw, 168px); /* oversized stat numerals */ --display-ultra: clamp(140px, 18vw, 260px); /* the single largest live value */ /* Line height and tracking */ --leading-tight: 1.08; /* display headings */ --leading-snug: 1.25; --leading-normal: 1.5; /* body copy */ --leading-relaxed: 1.65; /* long-form article body */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-caps: 0.14em; /* the eyebrow treatment used across the site */ /* Measure. Long-form pages need a reading width, not the full container. */ --measure: 68ch; --measure-narrow: 52ch; /* ========================================================================== 4. SPACE A true 4px grid. The live CSS used 6, 10, 14, 18, 22, 30, 44, 110 and 130, which all break the grid. Those map to the nearest rung below. ========================================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 112px; /* absorbs the live 110px */ --space-15: 128px; /* absorbs the live 130px */ /* Fluid rhythm. Section padding should breathe with the viewport. */ --space-section: clamp(56px, 8vw, 128px); --space-section-tight: clamp(40px, 5vw, 80px); --gutter: clamp(20px, 4vw, 40px); --container: 1400px; /* preserved */ --container-text: 760px; /* long-form article column */ --container-wide: 1600px; /* ========================================================================== 5. RADIUS Collapses 16 live values onto 7 rungs. The three original token names are preserved at their exact original values so live components do not move. ========================================================================== */ --radius-xs: 2px; --radius-sm: 8px; --radius-md: 12px; --radius-card: 16px; /* preserved */ --radius-lg: 20px; --radius-large: 24px; /* preserved */ --radius-xl: 32px; --radius-pill: 999px; /* preserved */ --radius-circle: 50%; /* ========================================================================== 6. ELEVATION 41 distinct live shadows collapse to 5 rungs plus 2 brand glows. ========================================================================== */ --shadow-xs: 0 1px 2px rgba(11, 11, 15, 0.04); --shadow-sm: 0 2px 8px rgba(11, 11, 15, 0.05); --shadow-md: 0 12px 28px rgba(11, 11, 15, 0.07); --shadow-lg: 0 18px 44px rgba(11, 11, 15, 0.06); --shadow-xl: 0 30px 80px rgba(11, 11, 15, 0.08); --shadow-ink: 0 40px 100px rgba(0, 0, 0, 0.55); /* on dark sections */ --shadow-glow: 0 12px 28px rgba(255, 62, 145, 0.30); --shadow-glow-ring: 0 12px 28px rgba(255, 62, 145, 0.30), 0 0 0 1.5px var(--grad-pink); --border-hairline: 1px; --border-thick: 1.5px; /* ========================================================================== 7. MOTION 12 live durations collapse to 4. Respect reduced motion, see the bottom. ========================================================================== */ --dur-instant: 120ms; --dur-fast: 200ms; /* the most used live value */ --dur-base: 280ms; --dur-slow: 500ms; --dur-ambient: 2400ms; /* background drift and aurora loops */ --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); /* ========================================================================== 8. LAYERING The live CSS set z-index ad hoc. These are the only values that should ever be used, so stacking is predictable. ========================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 500; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; /* ========================================================================== 9. BREAKPOINTS Reference only. CSS cannot use var() inside a media query, so these document the standard. New code uses these four and nothing else. Live CSS currently uses 10 different values, migrating incrementally. ========================================================================== */ --bp-sm: 540px; --bp-md: 720px; --bp-lg: 980px; /* the most used live breakpoint */ --bp-xl: 1200px; } /* ============================================================================ DARK SURFACES The site runs light with dark sections rather than a full dark mode. Applying .on-ink re-points the semantic aliases, so any component dropped inside a dark section adapts without a single component override. ========================================================================== */ .on-ink, .section-ink { --color-bg: var(--ink); --color-bg-subtle: var(--ink-soft); --color-surface: var(--ink-soft); --color-surface-raised: var(--charcoal); --color-text: var(--paper); --color-text-muted: var(--color-text-on-ink); --color-border: var(--border-on-ink); --color-border-strong: rgba(255, 255, 255, 0.18); } /* ============================================================================ UTILITIES A deliberately small set. Anything used more than 3 times becomes a component class instead, so this never grows into a framework. ========================================================================== */ .u-measure { max-width: var(--measure); } .u-measure-narrow { max-width: var(--measure-narrow); } .u-stack > * + * { margin-block-start: var(--flow, var(--space-4)); } .u-section { padding-block: var(--space-section); } .u-section-tight { padding-block: var(--space-section-tight); } .u-eyebrow { font-size: var(--text-3xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted); } .u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Focus. One ring, everywhere, meeting contrast requirements on both light and dark surfaces. */ :where(a, button, [tabindex], input, select, textarea, summary):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-xs); } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-ambient: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }