/* ============================================================================ RIDDLE & COGHILL — DESIGN TOKENS ---------------------------------------------------------------------------- Colour is expressed in two layers: 1. PALETTE PRIMITIVES (--p-*) — each client palette declares its raw colours ONCE, for both a light ground and a dark ground. 2. SEMANTIC TOKENS (--c-*) — what the rest of the codebase actually uses. These are mapped from the primitives in exactly two places: the light mapping and the dark mapping. So palette and light/dark are INDEPENDENT axes, set by two attributes: <-- defaults ... any of the 5 palettes × either mode. Adding a palette means adding one primitives block — dark mode then works for it automatically, because the mapping below is palette-agnostic. Nothing in the rest of the codebase references a raw hex value. ========================================================================== */ :root { /* ---- Type ------------------------------------------------------------- */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-hero: clamp(2.75rem, 6vw, 5.5rem); --fs-h1: clamp(2.25rem, 4.5vw, 3.75rem); --fs-h2: clamp(1.75rem, 3vw, 2.75rem); --fs-h3: clamp(1.25rem, 2vw, 1.6rem); --fs-lead: clamp(1.05rem, 1.4vw, 1.3rem); --fs-body: 1rem; --fs-small: 0.85rem; --fs-eyebrow: 0.72rem; --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.7; --tracking-eyebrow: 0.24em; --tracking-nav: 0.18em; /* ---- Spacing scale ---------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --container: 1280px; --container-narrow: 900px; --gutter: clamp(1.25rem, 5vw, 4rem); /* Generous vertical rhythm — the calm comes from the space around things. */ --section-y: clamp(5rem, 11vw, 10rem); /* ---- Form / structure ------------------------------------------------- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --border-hairline: 1px; --shadow-soft: 0 1px 2px rgba(20, 24, 40, 0.04), 0 8px 30px rgba(20, 24, 40, 0.06); --shadow-lift: 0 12px 40px rgba(20, 24, 40, 0.12); /* The two global motion dials. Everything token-driven scales from these, so pace is changed here rather than hunting individual rules. */ --transition: 400ms cubic-bezier(0.22, 1, 0.36, 1); --transition-slow: 950ms cubic-bezier(0.22, 1, 0.36, 1); --header-h: 76px; /* Height of the sticky contact bar. The header offsets itself by this, so the two never overlap — change it here and both follow. */ --topbar-h: 40px; } /* ============================================================================ PALETTE PRIMITIVES ---------------------------------------------------------------------------- `--p-l-*` = the palette on a LIGHT ground. `--p-d-*` = the same palette on a DARK ground. The dark set is not a mechanical inversion: accents are lifted so they stay legible against their own dark ground (a navy accent on navy, or a near-black accent on black, would simply vanish), and mutes are pulled up because low-contrast greys read far weaker on dark than on paper. ========================================================================== */ /* ---------------------------------------- PALETTE 1 — NAVY & GOLD (DEFAULT) */ :root, [data-theme="navy-gold"] { /* The photography is uniformly warm (beige/walnut German kitchens), so the paper is held just off-warm and the alt band is pulled toward the navy — otherwise the palette disappears into the images. */ --p-l-bg: #F6F6F4; /* paper, neutral */ --p-l-surface: #FFFFFF; --p-l-surface-alt: #E9EBEF; /* cool stone, navy-tinted */ --p-l-heading: #14213D; /* deep navy */ --p-l-text: #2B2F38; --p-l-muted: #6E7076; --p-l-line: #DEDFE4; --p-l-accent: #B4924E; /* restrained antique gold */ --p-l-accent-strong: #9C7C3C; --p-l-accent-contrast: #FFFFFF; /* text on accent */ --p-l-placeholder-bg: #E8E5DD; --p-l-placeholder-fg: #A9A498; --p-d-bg: #101A30; /* navy, taken down so surfaces can lift */ --p-d-surface: #16233F; --p-d-surface-alt: #1B2B4B; --p-d-heading: #FFFFFF; --p-d-text: #C9CEDA; --p-d-muted: #8A93A6; --p-d-line: rgba(255, 255, 255, 0.14); --p-d-accent: #C9A961; /* gold lifted to hold against navy */ --p-d-accent-strong: #DCC07C; --p-d-accent-contrast: #14213D; --p-d-placeholder-bg: #1C2740; --p-d-placeholder-fg: #55617D; } /* ------------------------------------------------ PALETTE 2 — NAVY & WHITE */ [data-theme="navy-white"] { --p-l-bg: #FFFFFF; --p-l-surface: #FFFFFF; --p-l-surface-alt: #F1F3F7; --p-l-heading: #14213D; --p-l-text: #29303D; --p-l-muted: #6B7280; --p-l-line: #E1E5EC; --p-l-accent: #14213D; /* navy acts as accent */ --p-l-accent-strong: #0C1830; --p-l-accent-contrast: #FFFFFF; --p-l-placeholder-bg: #EAEDF2; --p-l-placeholder-fg: #A6AEBD; --p-d-bg: #0F1728; --p-d-surface: #16213A; --p-d-surface-alt: #1B2740; --p-d-heading: #FFFFFF; --p-d-text: #C9CEDA; --p-d-muted: #8C95A6; --p-d-line: rgba(255, 255, 255, 0.14); --p-d-accent: #93AEE0; /* the navy read back as light blue */ --p-d-accent-strong: #B6C8EC; --p-d-accent-contrast: #0F1728; --p-d-placeholder-bg: #1A2438; --p-d-placeholder-fg: #566180; } /* ------------------------------------------------ PALETTE 3 — GOLD & BLACK */ [data-theme="gold-black"] { --p-l-bg: #FBFAF7; --p-l-surface: #FFFFFF; --p-l-surface-alt: #F2EFE7; --p-l-heading: #111111; --p-l-text: #23231F; --p-l-muted: #6E6A5F; --p-l-line: #E4DFD2; --p-l-accent: #C0A050; /* gold */ --p-l-accent-strong: #A8883A; --p-l-accent-contrast: #111111; /* black text on gold */ --p-l-placeholder-bg: #ECE7DA; --p-l-placeholder-fg: #B0A889; --p-d-bg: #0E0E0D; --p-d-surface: #171716; --p-d-surface-alt: #1E1E1B; --p-d-heading: #F3E9CF; --p-d-text: #CFC9BC; --p-d-muted: #8C877B; --p-d-line: rgba(240, 220, 170, 0.16); --p-d-accent: #CCAC5C; --p-d-accent-strong: #E0C57E; --p-d-accent-contrast: #111111; --p-d-placeholder-bg: #1B1A16; --p-d-placeholder-fg: #575347; } /* ------------------------------------------------ PALETTE 4 — GREY & WHITE */ [data-theme="grey-white"] { --p-l-bg: #FAFAFA; --p-l-surface: #FFFFFF; --p-l-surface-alt: #F0F0F0; --p-l-heading: #2A2C2E; --p-l-text: #3C3F42; --p-l-muted: #7A7E82; --p-l-line: #E4E4E4; --p-l-accent: #52565B; /* charcoal accent */ --p-l-accent-strong: #35383C; --p-l-accent-contrast: #FFFFFF; --p-l-placeholder-bg: #EAEAEA; --p-l-placeholder-fg: #ABABAB; --p-d-bg: #1A1C1E; --p-d-surface: #232527; --p-d-surface-alt: #2A2C2E; --p-d-heading: #FFFFFF; --p-d-text: #C6C8CA; --p-d-muted: #8C9094; --p-d-line: rgba(255, 255, 255, 0.14); --p-d-accent: #BCC1C7; /* charcoal read back as light grey */ --p-d-accent-strong: #DDE0E3; --p-d-accent-contrast: #1A1C1E; --p-d-placeholder-bg: #232527; --p-d-placeholder-fg: #5A5E62; } /* --------------------------- PALETTE 5 — PURE WHITE (near-monochrome, minimal) */ [data-theme="pure-white"] { --p-l-bg: #FFFFFF; --p-l-surface: #FFFFFF; --p-l-surface-alt: #F6F6F6; --p-l-heading: #111111; --p-l-text: #2C2C2C; --p-l-muted: #8A8A8A; --p-l-line: #ECECEC; --p-l-accent: #111111; /* near-black accent */ --p-l-accent-strong: #000000; --p-l-accent-contrast: #FFFFFF; --p-l-placeholder-bg: #F0F0F0; --p-l-placeholder-fg: #BBBBBB; --p-d-bg: #0E0E0E; --p-d-surface: #161616; --p-d-surface-alt: #1D1D1D; --p-d-heading: #FFFFFF; --p-d-text: #C4C4C4; --p-d-muted: #8A8A8A; --p-d-line: rgba(255, 255, 255, 0.12); --p-d-accent: #F2F2F2; /* near-white accent mirrors near-black */ --p-d-accent-strong: #FFFFFF; --p-d-accent-contrast: #111111; --p-d-placeholder-bg: #1A1A1A; --p-d-placeholder-fg: #555555; } /* ------------------------------------------ PALETTE 6 — CHARCOAL & GOLD */ /* Palette 1 with the navy swapped for #2F343D. Everything gold is unchanged; the neutrals that were navy-tinted are re-tinted to the charcoal's hue so the family still reads as one palette rather than two colours side by side. */ [data-theme="charcoal-gold"] { --p-l-bg: #F6F6F4; --p-l-surface: #FFFFFF; --p-l-surface-alt: #EAEBEC; /* cool stone, charcoal-tinted */ --p-l-heading: #2F343D; /* charcoal, in place of the navy */ --p-l-text: #2B2F38; --p-l-muted: #6E7076; --p-l-line: #DEDFE1; --p-l-accent: #B4924E; /* same restrained antique gold */ --p-l-accent-strong: #9C7C3C; --p-l-accent-contrast: #FFFFFF; --p-l-placeholder-bg: #E8E5DD; --p-l-placeholder-fg: #A9A498; --p-d-bg: #22262D; /* below the charcoal so surfaces can lift */ --p-d-surface: #2F343D; /* the charcoal itself carries the cards */ --p-d-surface-alt: #383E48; --p-d-heading: #FFFFFF; --p-d-text: #CDD0D6; --p-d-muted: #9297A1; --p-d-line: rgba(255, 255, 255, 0.14); --p-d-accent: #C9A961; /* gold lifted, as in navy & gold */ --p-d-accent-strong: #DCC07C; --p-d-accent-contrast: #2F343D; --p-d-placeholder-bg: #2A2F38; --p-d-placeholder-fg: #5D6470; } /* ============================================================================ SEMANTIC MAPPING — LIGHT (default) ---------------------------------------------------------------------------- Page ground is paper; `.section--inverse` bands are the dark set. ========================================================================== */ :root, :root[data-mode="light"] { color-scheme: light; --c-bg: var(--p-l-bg); --c-surface: var(--p-l-surface); --c-surface-alt: var(--p-l-surface-alt); --c-heading: var(--p-l-heading); --c-text: var(--p-l-text); --c-text-muted: var(--p-l-muted); --c-line: var(--p-l-line); --c-accent: var(--p-l-accent); --c-accent-strong: var(--p-l-accent-strong); --c-accent-contrast: var(--p-l-accent-contrast); --c-placeholder-bg: var(--p-l-placeholder-bg); --c-placeholder-fg: var(--p-l-placeholder-fg); --c-inverse-bg: var(--p-d-bg); --c-inverse-surface: var(--p-d-surface); --c-inverse-heading: var(--p-d-heading); --c-inverse-text: var(--p-d-text); --c-inverse-line: var(--p-d-line); /* The accent as it must appear ON the contrast band — i.e. the other ground's accent. A navy accent on a navy band would disappear. */ --c-inverse-accent: var(--p-d-accent); } /* ============================================================================ SEMANTIC MAPPING — DARK ---------------------------------------------------------------------------- The two grounds trade places: the page becomes the dark set, and the `.section--inverse` bands become paper. The rhythm of the page — quiet ground, one contrasting band — is preserved rather than flattened, and every layout rule keeps working because only these tokens moved. ========================================================================== */ :root[data-mode="dark"] { color-scheme: dark; --c-bg: var(--p-d-bg); --c-surface: var(--p-d-surface); --c-surface-alt: var(--p-d-surface-alt); --c-heading: var(--p-d-heading); --c-text: var(--p-d-text); --c-text-muted: var(--p-d-muted); --c-line: var(--p-d-line); --c-accent: var(--p-d-accent); --c-accent-strong: var(--p-d-accent-strong); --c-accent-contrast: var(--p-d-accent-contrast); --c-placeholder-bg: var(--p-d-placeholder-bg); --c-placeholder-fg: var(--p-d-placeholder-fg); --c-inverse-bg: var(--p-l-bg); --c-inverse-surface: var(--p-l-surface); --c-inverse-heading: var(--p-l-heading); --c-inverse-text: var(--p-l-text); --c-inverse-line: var(--p-l-line); --c-inverse-accent: var(--p-l-accent); /* Shadow can't be seen on dark ground as a soft grey halo — it has to be a genuine black, deeper and tighter, or cards just look flat. */ --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.36); --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.55); }