/* ============================================================ Meridian — Design Tokens Single source of truth. Nothing below this file hardcodes a colour, a type size, or a spacing step. FONT NOTE: Hanken Grotesk + Inter are free stand-ins for the licensed brand faces Galano Grotesque (headings) and Apercu (body). To swap in the real fonts later, change ONLY the two --font-* values below and the in each page . ============================================================ */ :root { /* ---- Brand accents --------------------------------------- Sampled from the Meridian mark (assets/logo/meridian-mark.svg). All three are deliberately light enough to carry ink text, because every one of them is used as a chip or a fill somewhere on the site. Accents/fills ONLY, never body text. */ --coral: #FF7A5C; /* primary accent; CTA fill WITH dark text only */ --amber: #F79E4B; /* hover, secondary CTA, warm gradients, icon fills */ --sky: #8FB8FF; /* sparingly: links, tags, small highlights */ /* Legacy aliases. The component layer was written against the previous palette's names; these keep it working without a 2,000-line rename. New work should use the names above. */ --sunflower: var(--coral); --ember: var(--amber); --teal: var(--sky); /* Base */ --ink: #14161C; /* headings, body text, dark sections, footer */ --offwhite: #F5F2EC; /* page background — never pure #FFF (reads cold/generic) */ --warmgrey: #6C6A73; /* muted/secondary text — 4.8:1 on --offwhite */ --line: rgba(20,22,28,.10); /* Glass */ --glass-tint: rgba(245,242,236,.70); --glass-blur: 16px; --glass-border: rgba(255,255,255,.40); /* Type */ --font-head: 'Hanken Grotesk', system-ui, sans-serif; /* stand-in for Galano Grotesque */ --font-body: 'Inter', system-ui, sans-serif; /* stand-in for Apercu */ /* Scale (rem) */ --h1: clamp(2.4rem, 5vw, 4rem); --h2: clamp(1.8rem, 3.5vw, 2.75rem); --h3: 1.35rem; --body: 1.0625rem; --kicker: .8125rem; /* uppercase eyebrow, +3% letter-spacing, --warmgrey */ /* Rhythm */ --maxw: 1200px; --gap: clamp(1rem, 2.5vw, 2rem); --section-y: clamp(4rem, 9vw, 7rem); --radius: 16px; /* ---- Derived tokens (additions to the spec set) ---------- */ /* Surfaces layered on --offwhite */ --surface: #FCFAF6; /* card face, one step above page */ --surface-sunk: #EDE9E1; /* wells, image letterbox, ribbon */ --ink-soft: rgba(245,242,236,.72);/* body text on --ink sections */ --line-strong: rgba(20,22,28,.18); /* Elevation — warm-tinted, never neutral grey */ --shadow-sm: 0 1px 2px rgba(20,22,28,.05), 0 2px 8px rgba(20,22,28,.04); --shadow-md: 0 2px 4px rgba(20,22,28,.05), 0 12px 28px rgba(20,22,28,.08); --shadow-lg: 0 4px 8px rgba(20,22,28,.06), 0 24px 56px rgba(20,22,28,.12); /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: 140ms; --dur: 200ms; --dur-slow: 380ms; /* Radii */ --radius-sm: 10px; --radius-lg: 24px; --radius-pill: 999px; /* Focus ring — must be visible on both light and ink surfaces */ --focus: 0 0 0 3px var(--offwhite), 0 0 0 6px var(--amber); --focus-on-ink: 0 0 0 3px var(--ink), 0 0 0 6px var(--coral); } /* ============================================================ LOGO-DERIVED PALETTE Sampled directly from the Meridian mark (assets/logo/ meridian-mark.svg): an ink ring split on its meridian, the eastern half coral, with amber and sky as the two supporting longitudes. The page is built to roughly the mark's own ratio — mostly ink and paper, coral at accent weight — so the site reads as the logo rather than as a neutral template with a coral button. ink #14161C ring and wordmark coral #FF7A5C eastern half amber #F79E4B warm longitude sky #8FB8FF cool longitude Accents stay fills and shapes. Text is always ink or offwhite. ============================================================ */ :root { /* Tinted washes, for large soft fills */ --sunflower-wash: rgba(255,122,92,.14); --ember-wash: rgba(247,158,75,.14); --teal-wash: rgba(143,184,255,.20); /* Type scale extensions: the old scale topped out at 2.75rem, which left the page with no display register. */ --display: clamp(3rem, 7.5vw, 6rem); --statement: clamp(1.5rem, 3.2vw, 2.5rem); --num: clamp(2rem, 4.5vw, 3.5rem); --micro: .75rem; }