/* ==========================================================================
Koors Overstock — design tokens (brand/tokens.css, v1 · 2026-11-08)
--------------------------------------------------------------------------
Drop-in for store/public/css/tokens.css (SPEC §4.9). Variable names are the
contract; values may be tuned later without touching components.
Fonts (Google Fonts, both variable; self-host later for Lighthouse):
--font-display (Archivo 600–800): headlines, prices, % off badges, condition pills.
--font-sans (Inter 400–600): body, UI, forms, tables.
Prices and tables: font-variant-numeric: tabular-nums;
Contrast (WCAG 2.2, computed 2026-11-08; AA = 4.5:1 text, 3:1 large text/UI):
LIGHT text #1C1C1E on bg 16.05 · on surface 17.01 · on surface-2 14.58
text-muted #5A6270 on bg 5.80 · surface 6.15 · surface-2 5.27
primary #14213D as text on bg 15.07 · white on primary 15.97
accent #B93C0B as text on bg 5.33 · surface 5.65 · surface-2 4.85 · white on accent 5.65
success #1E7B34 5.03/5.33/4.57 · warning #9A5B00 5.12/5.43/4.65 · danger #B3261E 6.17/6.54/5.60 (bg/surface/surface-2)
condition colours as text on bg/surface/surface-2 and WHITE text on them as fills:
new #1E7B34 5.03/5.33/4.57 · white-on 5.33
open-box #0B6E8C 5.47/5.80/4.97 · white-on 5.80
like-new #2E55B8 6.37/6.76/5.79 · white-on 6.76
good #8A5A00 5.59/5.93/5.08 · white-on 5.93
fair #A8491A 5.45/5.78/4.95 · white-on 5.78
for-parts #5A6270 5.80/6.15/5.27 · white-on 6.15
DARK text #F2EFE9 on bg 16.16 · surface 14.66 · surface-2 12.85
text-muted #A6AEBB 8.29/7.52/6.60 · primary #A9C3FF as text 10.54 · #0E1320 on primary 10.54
accent #FF9A52 as text 8.83/8.01/7.02 · #1A1000 on accent 8.94
success #5BD17A 9.58 · warning #F5B94A 10.52 · danger #FF7B72 7.35 (on bg); all ≥ 5.85 on surface-2
condition colours (dark variants) as text ≥ 7.2 on every surface; #0E1320 text on them as fills ≥ 9.0
Decorative only (no text): --color-border (~1.4:1 by design), --color-brand-orange #F28C28
(logo/graphic colour: white text on it is 2.45:1 — never put text on it; dark text 6.93 is fine).
========================================================================== */
:root {
color-scheme: light;
/* ---- Surfaces & text ---- */
--color-bg: #FAF8F5; /* warm off-white: kraft paper, not clinical */
--color-surface: #FFFFFF; /* cards, product tiles, inputs */
--color-surface-2: #F1EDE6; /* page sections, table stripes, footer */
--color-text: #1C1C1E;
--color-text-muted: #5A6270; /* captions, "was" prices, meta */
--color-border: #D8D2C8;
/* ---- Brand ---- */
--color-primary: #14213D; /* Workshop Navy — trust, buttons, header */
--color-primary-contrast: #FFFFFF;
--color-accent: #B93C0B; /* Deal Orange — % off badges, sale prices, CTAs that mean "save" */
--color-accent-contrast: #FFFFFF;
/* ---- Status ---- */
--color-success: #1E7B34;
--color-warning: #9A5B00;
--color-danger: #B3261E;
/* ---- Condition badges (SPEC §2.2 codes). Fill with the colour + --color-cond-contrast text,
or use the colour as text on any surface; both pass AA. ---- */
--color-cond-new: #1E7B34; /* new — green: sealed, untouched */
--color-cond-open-box: #0B6E8C; /* open_box — teal: complete, box opened */
--color-cond-like-new: #2E55B8; /* like_new — blue: used, no visible wear */
--color-cond-good: #8A5A00; /* good — bronze: light cosmetic wear */
--color-cond-fair: #A8491A; /* fair — rust: obvious wear, fully working */
--color-cond-for-parts: #5A6270; /* for_parts — slate: not working / incomplete */
--color-cond-contrast: #FFFFFF;
/* ---- Helpers (not in the required set, safe to use) ---- */
--color-accent-soft: #FDE8DC; /* badge/callout background; accent text on it 4.78:1 */
--color-primary-soft: #E6EBF5; /* selected chips, info callouts; body text on it ≥ 13:1 */
--color-link: #2E55B8; /* 6.76:1 on surface */
--color-focus: #2E55B8;
--color-brand-orange: #F28C28; /* logo tag colour — graphics only, never text */
--color-overlay: rgb(20 33 61 / 0.55);
/* ---- Typography ---- */
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Archivo", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* SKUs, order numbers */
--text-xs: 0.75rem; /* 12px — badges, legal */
--text-sm: 0.875rem; /* 14px — meta, table cells */
--text-base: 1rem; /* 16px — body */
--text-lg: 1.125rem; /* 18px — lead paragraphs, product title in tile */
--text-xl: 1.25rem; /* 20px — card headings, price in tile */
--text-2xl: 1.5rem; /* 24px — section headings, product page price */
--text-3xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); /* 28–36px — page titles, hero */
--text-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); /* 36–52px — hero headline (optional) */
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--tracking-tight: -0.01em; /* display headlines */
--tracking-wide: 0.04em; /* uppercase badge text */
/* ---- Shape & depth ---- */
--radius-sm: 4px; /* badges, inputs */
--radius-md: 8px; /* buttons, cards */
--radius-lg: 14px; /* hero panels, modals, images */
--radius-pill: 999px; /* condition pills, filter chips */
--shadow-sm: 0 1px 2px rgb(20 33 61 / 0.06), 0 1px 3px rgb(20 33 61 / 0.08);
--shadow-md: 0 2px 4px rgb(20 33 61 / 0.06), 0 8px 20px rgb(20 33 61 / 0.10);
/* ---- Spacing (4px base) ---- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
/* ---- Layout helpers ---- */
--container-max: 72rem; /* 1152px */
--gutter: var(--space-4); /* 16px side gutter at phone width */
--tap-min: 44px;
}
/* ==========================================================================
Dark theme. Same contract; lighter brand colours with DARK contrast text.
Applies when the OS prefers dark and the page has not forced light...
========================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-bg: #0E1320;
--color-surface: #171D2C;
--color-surface-2: #202839;
--color-text: #F2EFE9;
--color-text-muted: #A6AEBB;
--color-border: #2E3647;
--color-primary: #A9C3FF;
--color-primary-contrast: #0E1320;
--color-accent: #FF9A52;
--color-accent-contrast: #1A1000;
--color-success: #5BD17A;
--color-warning: #F5B94A;
--color-danger: #FF7B72;
--color-cond-new: #5BD17A;
--color-cond-open-box: #4FC3E6;
--color-cond-like-new: #9DB7FF;
--color-cond-good: #F2C25E;
--color-cond-fair: #FFA26B;
--color-cond-for-parts: #B8C0CC;
--color-cond-contrast: #0E1320;
--color-accent-soft: rgb(255 154 82 / 0.14);
--color-primary-soft: rgb(169 195 255 / 0.14);
--color-link: #9DB7FF;
--color-focus: #9DB7FF;
--color-overlay: rgb(0 0 0 / 0.6);
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.5);
--shadow-md: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.55);
}
}
/* ...or whenever the page forces dark explicitly. */
:root[data-theme="dark"] {
color-scheme: dark;
--color-bg: #0E1320;
--color-surface: #171D2C;
--color-surface-2: #202839;
--color-text: #F2EFE9;
--color-text-muted: #A6AEBB;
--color-border: #2E3647;
--color-primary: #A9C3FF;
--color-primary-contrast: #0E1320;
--color-accent: #FF9A52;
--color-accent-contrast: #1A1000;
--color-success: #5BD17A;
--color-warning: #F5B94A;
--color-danger: #FF7B72;
--color-cond-new: #5BD17A;
--color-cond-open-box: #4FC3E6;
--color-cond-like-new: #9DB7FF;
--color-cond-good: #F2C25E;
--color-cond-fair: #FFA26B;
--color-cond-for-parts: #B8C0CC;
--color-cond-contrast: #0E1320;
--color-accent-soft: rgb(255 154 82 / 0.14);
--color-primary-soft: rgb(169 195 255 / 0.14);
--color-link: #9DB7FF;
--color-focus: #9DB7FF;
--color-overlay: rgb(0 0 0 / 0.6);
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.5);
--shadow-md: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.55);
}
/* Reduced motion: components should read this rather than hard-coding durations. */
:root { --motion-fast: 120ms; --motion-base: 200ms; }
@media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; } }