/* ============================================================================ STAGE 3 CONSULTING — DESIGN TOKENS The single source of truth. No component may introduce a raw colour, size, or duration; everything composes from this file. ========================================================================= */ :root{ /* --- Core palette ------------------------------------------------------- 80–90% neutral, 10–20% burgundy. Burgundy is reserved for the apex, the active state, the CTA and the number — never for surfaces. */ --ink: #111214; /* near black — primary surface + type */ --graphite: #25272A; /* elevated dark surface, dark-section cards */ --graphite-soft: #34373B; /* dark hairlines */ --off-white: #F6F5F2; /* warm off white — primary light surface */ --white: #FFFFFF; --steel: #8A8D91; /* muted type on light */ /* Sampled from the supplied logo artwork — all three files agree on it, so the UI accent and the mark are literally the same red. */ --burgundy: #B40B10; /* accent, resting — brand red */ --burgundy-lift: #CE1015; /* accent, hover / emphasis */ --burgundy-deep: #8C080C; /* accent, pressed */ /* --- Semantic roles: light surface ------------------------------------ */ --bg: var(--off-white); --bg-raised: var(--white); --text: var(--ink); --text-muted: #5B5F64; --text-faint: var(--steel); --line: #DFDDD7; /* hairline on warm off-white */ --line-strong: #C6C3BB; --accent: var(--burgundy); --accent-hover: var(--burgundy-lift); /* --- Semantic roles: dark surface (opt in with .is-dark) --------------- */ --d-bg: var(--ink); --d-bg-raised: var(--graphite); --d-text: #F4F3F0; --d-text-muted: #A2A6AB; --d-text-faint: #6E7276; --d-line: #2E3135; --d-line-strong: #43474C; /* --- Focus ------------------------------------------------------------- */ --focus: var(--burgundy); --focus-on-dark: #F0545A; /* brand red is too dark to read on --ink */ /* --- Typography -------------------------------------------------------- Inter Tight carries the editorial headline voice (the closest free match to Neue Haas Grotesk / Söhne); Inter carries UI and body. */ --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Fluid scale — designed at 1440, holds from 320 to 1920 */ --fs-display: clamp(2.5rem, 1.30rem + 5.20vw, 5.50rem); /* 40 → 88 */ --fs-h1: clamp(2.125rem, 1.25rem + 3.80vw, 4.00rem); /* 34 → 64 */ --fs-h2: clamp(1.75rem, 1.15rem + 2.60vw, 3.00rem); /* 28 → 48 */ --fs-h3: clamp(1.375rem, 1.05rem + 1.40vw, 2.00rem); /* 22 → 32 */ --fs-h4: clamp(1.125rem, 0.98rem + 0.62vw, 1.375rem); /* 18 → 22 */ --fs-lead: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);/* 17 → 21 */ --fs-body: 1.03125rem; /* 16.5 */ --fs-sm: 0.875rem; /* 14 */ --fs-xs: 0.8125rem; /* 13 */ --fs-eyebrow: 0.75rem; /* 12 */ --lh-display: 0.98; --lh-tight: 1.06; --lh-heading: 1.14; --lh-body: 1.62; --lh-ui: 1.35; --ls-display: -0.032em; --ls-heading: -0.022em; --ls-body: -0.006em; --ls-eyebrow: 0.16em; --ls-mono: 0.04em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* --- Spacing — 8px base, no arbitrary values anywhere else ------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 5rem; /* 80 */ --space-10: 6rem; /* 96 */ --space-11: 7.5rem; /* 120 */ --space-12: 10rem; /* 160 */ /* Vertical rhythm between full-bleed sections. Tightened from 8.5/11rem — at that scale the page read as sparse and made a visitor scroll past empty bands between every idea. */ --section-y: clamp(3rem, 5.2vw, 5.5rem); --section-y-lg: clamp(3.75rem, 6.4vw, 7rem); /* --- Layout ------------------------------------------------------------ */ --page-max: 1280px; /* main content width */ --page-narrow: 880px; /* editorial / article measure */ --page-pad: clamp(1.25rem, 4vw, 4rem); --grid-cols: 12; --grid-gap: clamp(1rem, 2vw, 2rem); --header-h: 76px; --header-h-sm: 64px; /* --- Form ------------------------------------------------------------- */ --radius: 2px; /* precision, not softness */ --radius-lg: 3px; --radius-media: 10px; /* portraits and imagery soften; UI does not */ --radius-pill: 999px; --border: 1px; /* --- Elevation — restrained; depth comes from hairlines, not shadow --- */ --shadow-sm: 0 1px 2px rgba(17,18,20,.05); --shadow-md: 0 12px 32px -12px rgba(17,18,20,.16); --shadow-lg: 0 32px 64px -24px rgba(17,18,20,.22); /* --- Motion — precision and control, never spectacle ------------------- */ --ease: cubic-bezier(.22,.68,.28,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in: cubic-bezier(.7,0,.84,0); --dur-1: 140ms; /* micro: colour, border */ --dur-2: 260ms; /* control: hover lift, underline */ --dur-3: 560ms; /* reveal: section entrance */ --dur-4: 1200ms; /* draw: the Optimal Line */ /* --- Z-index ----------------------------------------------------------- */ --z-line: 0; --z-content: 1; --z-header: 100; --z-menu: 110; --z-modal: 200; } /* Dark sections remap the semantic roles rather than restating colours, so every component works on both surfaces without a variant class. */ .is-dark{ --bg: var(--d-bg); --bg-raised: var(--d-bg-raised); --text: var(--d-text); --text-muted: var(--d-text-muted); --text-faint: var(--d-text-faint); --line: var(--d-line); --line-strong: var(--d-line-strong); --focus: var(--focus-on-dark); color-scheme: dark; }