/* ========================================================================== tokens.css — design tokens for Hebble & Stone -------------------------------------------------------------------------- Everything that might be reused across components lives here as a CSS custom property. Touch colours, type, spacing, radii, motion in one place. ========================================================================== */ :root { /* ---------- Colour palette (from Lewis) -------------------------------- */ --hs-ink: #4D4D4D; /* body text, secondary copy */ --hs-green: #33926E; /* success state, completed progress dots */ --hs-plum: #5A2439; /* primary headings, borders, hero text */ --hs-saffron: #F9AE35; /* primary CTAs, accent, illustrated icons */ --hs-cream: #F8F7ED; /* page background */ --hs-sand: #D9D2C8; /* muted surfaces, hairlines, inactive dots */ --hs-bone: #EDE9E2; /* alternate surface (cards on cream) */ --hs-white: #FFFFFF; /* primary card surface */ --hs-blue: #3597F9; /* Combined-audit accent (from Lewis's mockup) */ /* v2 refresh — soft accent panels sampled from Lewis's v2 mockups. The core palette above is unchanged; these are additive surfaces only. */ --hs-rose: #F5EAEF; /* hero / pullquote / laptop-frame panels */ --hs-rose-deep: #EAC9D5; /* rose frame borders + pullquote rule */ --hs-iceblue: #EBF3F5; /* one hero route-card panel (v2) */ --hs-plum-logo: #7C324D; /* brighter plum baked into the logo + used for nav links (Lewis's nav is #7C324D, not #5A2439) */ /* ---------- Semantic colour roles -------------------------------------- */ --color-bg: var(--hs-cream); --color-bg-alt: var(--hs-bone); --color-surface: var(--hs-white); --color-surface-muted: var(--hs-sand); --color-text: var(--hs-plum); /* headings + emphasis */ --color-text-body: var(--hs-ink); /* paragraph copy */ --color-text-on-dark: var(--hs-cream); --color-bg-rose: var(--hs-rose); --color-bg-iceblue: var(--hs-iceblue); --color-accent: var(--hs-saffron); --color-accent-ink: var(--hs-plum); /* text on saffron */ --color-success: var(--hs-green); --color-border: var(--hs-plum); --color-border-muted: var(--hs-sand); /* Focus ring — always 3:1 against any of our backgrounds. */ --color-focus-ring: var(--hs-saffron); --color-focus-ring-on-saffron: var(--hs-plum); /* ---------- Type ------------------------------------------------------- */ /* Lewis's brief: DM Serif Display (Regular, 400) for editorial headings; DM Sans for body, subheadings, nav, buttons and the wordmark. Loaded from Google Fonts in each . System stacks follow so the page is readable while the webfont request is in flight. NB: DM Serif Display only ships a 400 weight — never ask it for 600/700 or the browser fakes bold (smeary faux-bold). Heading weight lives in base.css. */ --font-display: "DM Serif Display", "Iowan Old Style", "Source Serif Pro", "Charter", "Georgia", "Cambria", serif; --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Modular scale, fluid via clamp() so it shrinks gracefully on phones. */ --fs-step--1: clamp(0.875rem, 0.83rem + 0.22vw, 1rem); /* 14–16px */ --fs-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16–18px */ --fs-step-1: clamp(1.125rem, 1.06rem + 0.35vw, 1.375rem); /* 18–22px */ --fs-step-2: clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem); /* 22–28px */ --fs-step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem); /* 28–40px */ --fs-step-4: clamp(2.25rem, 1.86rem + 1.95vw, 3.5rem); /* 36–56px */ --fs-step-5: clamp(2.75rem, 2.18rem + 2.84vw, 4.5rem); /* 44–72px */ --lh-tight: 1.08; --lh-snug: 1.25; --lh-base: 1.55; --lh-loose: 1.7; --ls-tight: -0.02em; --ls-base: 0em; /* ---------- Spacing (8pt scale, fluid where useful) -------------------- */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-s: 1rem; /* 16px */ --space-m: 1.5rem; /* 24px */ --space-l: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: clamp(3.25rem, 2.5rem + 3.5vw, 6rem); /* big section gaps (v2: trimmed a touch toward Lewis's tighter rhythm) */ /* ---------- Layout ----------------------------------------------------- */ --measure: 65ch; /* max readable line length */ --container-max: 75rem; /* 1200px outer page width */ --container-narrow: 50rem; /* 800px narrow column */ --gutter: clamp(1rem, 2vw, 2rem); /* ---------- Radii ------------------------------------------------------ */ --radius-sm: 0.5rem; --radius-md: 1rem; --radius-lg: 1.5rem; --radius-pill: 999px; --radius-card: 1.25rem; /* ---------- Borders ---------------------------------------------------- */ --border-thin: 1px solid var(--color-border-muted); --border-medium: 2px solid var(--color-border); --border-thick: 3px solid var(--color-border); --border-focus: 3px solid var(--color-focus-ring); /* ---------- Shadows (used sparingly — flat design) --------------------- */ --shadow-sm: 0 1px 2px rgba(90, 36, 57, 0.06); --shadow-md: 0 4px 12px rgba(90, 36, 57, 0.08); /* ---------- Motion ----------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms; /* ---------- Z-index ---------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-nav: 100; --z-modal: 1000; } /* Respect a user's prefers-reduced-motion at the token level too — any element using --duration-* will instantly stop animating. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }