/* ===================================================================== TOKENS — Derby City Labs This is the ONLY file that defines a color, a font or a corner radius. Change the values here and the entire site follows. If you find yourself hard-coding a hex value anywhere else, add a token instead. DIRECTION — "apothecary", set on warm paper rather than dark. · warm ivory ground instead of white or black · a modern grotesque display face at medium weight, tracked in · mono for micro-labels, so specifications read as instrument output · generous soft radii — 16px on cards, 28px on media and sections · 17px body text and a wide measure The copper is Derby City's own, carried over from the brand work on 13 Sept. It sits in the same quality register as the warm-paper references without borrowing anyone's palette. ===================================================================== */ :root { /* ---- 1. BRAND ------------------------------------------------------ Copper on paper. --accent-deep is the hover: on a light ground a "brighter" accent washes out, so hover goes darker, not lighter. */ --accent: #B87333; /* rules, prices, active states */ /* Copper as TEXT, not as a surface. #B87333 measures 3.34:1 on paper and 3.00:1 on --bg-alt, so every copper word on the site failed AA for body text. This is the same color taken deep enough to pass on all three light grounds (5.37 / 4.83 / 5.96). Use --accent for fills, borders and active states; use this the moment copper is a letter. */ --accent-text: #8E541F; --accent-bright: #9C5E28; /* hover / highlight (deliberately deeper) */ --accent-deep: #7A4720; --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-line: color-mix(in srgb, var(--accent) 40%, transparent); /* ---- 2. SURFACES --------------------------------------------------- Warm paper by default. The dark block at the bottom is the option, not the other way round. */ --bg: #F4F0E8; /* page — warm paper */ --bg-alt: #EBE4D6; /* alternating band — deeper sand */ --panel: #FFFCF6; /* image wells, raised panels */ --surface: rgba(255,252,246,.66); /* cards */ --surface-hover: #FFFCF6; --line: rgba(32,26,20,.15); /* card borders */ --line-soft: rgba(32,26,20,.10); /* dividers */ --line-faint: rgba(32,26,20,.06); /* ---- 3. TEXT ------------------------------------------------------- Warm near-black, never pure #000 — it reads cold against ivory. */ --text: #1E1813; --text-body: rgba(30,24,19,.74); /* 6.59:1 on the lightest bg */ --text-dim: rgba(30,24,19,.68); /* 5.44:1 (was .56 -> 3.77) */ --text-faint: rgba(30,24,19,.63); /* 4.66:1 (was .42 -> 2.55) */ --text-error: #9B3A2F; /* --------------------------------------------------------------------- Why the dim/faint steps are so close together. These three are one ink at three alphas. The original scale (.74/.56/ .42 on warm paper) read beautifully at 16px and failed WCAG AA badly everywhere else: --text-dim measured 3.77:1 and --text-faint 2.55:1, against the 4.5:1 that body text needs. That is not a subtle miss. It is most of the type on a phone, because the micro-labels — SKU, unit price, quantity, stock, breadcrumbs, tier savings — are all set in 10-11px mono in one of these two tokens. Every one of the eleven --text-faint rules in components.css colors real text: footer notices, struck prices, cart notes, placeholders. None of it is decorative, so none of it can sit below 4.5:1. On this paper you cannot have a wide three-step light scale AND pass AA at 10px. The scale was compressed rather than the standard, and the measured ratio is written next to each value so the next person changing a number can see what it costs. If you need a genuinely faint, non-text gray for a rule or a ghost numeral, add a separate --line-* or --ghost token — do not reach for --text-faint. --------------------------------------------------------------------- */ /* ---- 4. BUTTONS ----------------------------------------------------- Deep ink on paper. Copper is reserved for rules, prices and state — a copper button competes with the specification data. */ --btn-bg: #241C15; --btn-ink: #FBF8F2; /* ---- 5. TYPE -------------------------------------------------------- Swap the families here AND in the at the top of each page. Space Grotesk display, modern grotesque with a technical edge Inter body and UI JetBrains Mono micro-labels, SKUs, CAS numbers, specifications Replaced the Newsreader serif on 7 Oct 2026 at the client's request for a more modern face. Display tracking lives in --ls-*. */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --fw-display: 500; /* a grotesque display reads best at medium */ --ls-h1: -.035em; --ls-h2: -.03em; --ls-display: -.02em; --fw-black: 700; /* UI only — nav, buttons, labels */ --fw-bold: 600; --fw-med: 500; --fs-hero: clamp(42px, 5.4vw, 78px); --fs-h2: clamp(30px, 4vw, 50px); --fs-h3: 21px; --fs-body: 17px; --fs-small: 14px; --fs-label: 11px; --fs-micro: 10px; --track-eyebrow: .22em; /* mono kickers need less tracking than caps */ --track-btn: .10em; --track-nav: .12em; /* ---- 6. SHAPE ------------------------------------------------------- Soft and generous. This is the single biggest lever on how premium the page feels — 0px reads editorial-harsh, 16px reads apothecary. */ --radius: 16px; --radius-sm: 10px; --radius-lg: 28px; /* media wells, section shells */ --border: 1px solid var(--line); /* Shadows are warm and shallow. A neutral black shadow on ivory reads as dirt; the tint keeps it looking like paper depth. */ --shadow-media: 0 26px 48px -18px rgba(58,40,22,.28); --shadow-card: 0 2px 10px rgba(58,40,22,.05); /* ---- DARK BAND ----------------------------------------------------- The one inverted section on the page. Deep espresso rather than black, so it still reads warm against the paper above and below. */ --band: #23190F; --band-card: #2E2216; --band-ink: #FBF6EC; --band-body: rgba(251,246,236,.66); --band-line: rgba(251,246,236,.14); /* The brand copper is too dark to sit on the band as small text — it measures ~2.9:1, under the 4.5:1 AA floor. This lighter copper is for labels on dark surfaces only; --accent stays the brand color. */ --accent-on-dark: #E8B37A; /* ---- 7. RHYTHM ------------------------------------------------------ */ --max: 1320px; --gutter: 22px; --section-y: 104px; --section-y-sm:64px; /* ---- 8. MOTION ------------------------------------------------------ */ --ease: cubic-bezier(.16,.9,.24,1); --t-fast: .2s; --t-med: .35s; /* ---- 9. LAYERS ------------------------------------------------------ */ --z-marquee: 400; --z-drawer: 500; --z-overlay: 600; --z-gate: 900; } /* ===================================================================== OPTIONAL DARK BRAND Add data-theme="dark" to and the whole site inverts. Every token below is a straight swap — no component CSS changes. ===================================================================== */ [data-theme="dark"] { --bg: #14110D; --bg-alt: #191510; --panel: #1D1811; --surface: rgba(255,252,246,.03); --surface-hover: rgba(255,252,246,.06); --line: rgba(255,248,236,.14); --line-soft: rgba(255,248,236,.10); --line-faint: rgba(255,248,236,.06); --text: #FBF8F2; --text-body: rgba(251,248,242,.68); /* 8.19:1 */ --text-dim: rgba(251,248,242,.56); /* 5.95:1 (was .50 -> 5.00) */ --text-faint: rgba(251,248,242,.50); /* 5.00:1 (was .36 -> 3.20) */ --btn-bg: #FBF8F2; --btn-ink: #1E1813; --accent-bright: #D08B4A; /* on dark, hover DOES go brighter */ --accent-text: var(--accent-on-dark); /* 10:1 on the dark grounds */ --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --accent-line: color-mix(in srgb, var(--accent) 42%, transparent); }