/* ============================================================= tokens.css — THE LOCKED STYLE FOUNDATION Stop N Shop Deli · 2110 Brooks Ave, Knoxville, TN Operator picks (2026-08-28): Typography — Option B: Anton + Chivo (changed from D/Bevan at operator request) Palette — Option 2: "Deli Paper" (cream page, black ink, red CTA, green + gold accents) Every color here is sampled from the client's own logo badge. The menu board's teal is deliberately absent. RULES (AGENTS.md > Global Invariants > Styling Foundation): - LOCKED once the operator approves style-preview.html. - styles.css and every page consume these via var(). - No raw color/font/size/space literals anywhere else. - Changing a token re-opens the rendered-preview gate. ============================================================= */ :root { /* ---- Color: brand --------------------------------------- Red is the action color: it carries every CTA and the price figures on the menu. Sampled #BF1D16 from the DELI ribbon. Contrast on the cream page is 5.14:1 — passes AA for body text, so it is safe for links and prices, not just for large type. */ --color-brand: #BF1D16; --color-brand-strong: #96150F; --color-brand-soft: #F7E0DC; --color-on-brand: #FFF8F0; /* ---- Color: accents ------------------------------------- Green from the SHOP wordmark. The logo's exact #22793B measures 4.49:1 on cream — it misses AA body text by a hair, so the token is darkened 2% to #207237 (4.92:1). Visually indistinguishable, and now safe as text. Gold from the badge ring. Gold is DECORATIVE ONLY on light surfaces: it is 1.63:1 on cream and fails badly as text there. Use it for rules, borders, and badges on light; it is safe as text only on the dark surface (10.05:1). */ --color-accent: #207237; --color-accent-strong: #17572A; --color-accent-soft: #DDEAE0; --color-gold: #EDAD46; --color-gold-deep: #C8862B; --color-gold-soft: #FAEBD0; /* ---- Color: neutrals (warm-tinted, never pure gray) ----- */ --color-ink: #1A130C; --color-ink-muted: #6B5A4A; --color-line: #E0CDB8; --color-line-strong: #C9B39B; --color-surface: #F6E7D8; --color-surface-raised: #FDF6EC; --color-surface-sunken: #EFDCC9; --color-surface-inverse: #0C0A06; --color-on-inverse: #F6E7D8; --color-on-inverse-muted: rgba(246, 231, 216, 0.76); /* ---- Color: state --------------------------------------- */ --color-focus: #207237; --color-error: #A11208; --color-success: #207237; /* ---- Scrims + hairlines (derived, never literal) --------- Photo overlays and translucent rules are mixed FROM the tokens above so styles.css never hard-codes an rgba(). Added after foundation approval: these are derivations of already-approved colors, so the approved appearance is unchanged. */ --scrim-heavy: color-mix(in srgb, var(--color-surface-inverse) 94%, transparent); --scrim-mid: color-mix(in srgb, var(--color-surface-inverse) 86%, transparent); --scrim-light: color-mix(in srgb, var(--color-surface-inverse) 62%, transparent); --gold-hairline: color-mix(in srgb, var(--color-gold) 34%, transparent); /* Inset double-rule on parchment panels. Decorative only, never used to carry meaning, so it sits well under the AA contrast floor on purpose. */ --rule-inset: color-mix(in srgb, var(--color-brand) 30%, transparent); /* ---- Component sizing ----------------------------------- Fixed dimensions the 4pt space scale does not express (logo lockups, reading measures, definition-list gutters). */ /* Fluid so the badge stays legible on a phone without crowding the delivery block beside it. Only applies under 1000px; above that the header swaps to the oversized hanging badge. */ --logo-header: clamp(60px, 20vw, 96px); --logo-hero: 96px; --logo-footer: 64px; --measure-hero: 42rem; --measure-anchor: 46rem; --measure-lede: 46ch; --fact-key-w: 6.5rem; /* ---- Typography ----------------------------------------- Anton is a single-weight (400) condensed grotesque. Headings must use --font-weight-head, NOT --font-weight-bold, or the browser will synthesize a smeared faux-bold. Headings are set in TITLE CASE (operator decision, 2026-08-28). The casing is authored in the markup — never via `text-transform: capitalize`, which would also capitalize articles and short prepositions. Anton is CONDENSED, so it carries larger sizes and tighter leading than a normal display face would. The scale below is deliberately bigger than a default 1.333 ramp — at ordinary sizes a condensed face just reads small and cramped rather than confident. */ --font-head: "Anton", Impact, "Haettenschweiler", "Arial Narrow", sans-serif; --font-body: "Chivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-weight-body: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-head: 400; /* Modular scale 1.333 (perfect fourth), scaled up for the condensed head face. Every clamp keeps max <= 2.5x min per the build playbook. */ --scale-ratio: 1.333; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-h4: 1.375rem; --text-h3: 1.75rem; --text-h2: clamp(2.00rem, 1.60rem + 1.90vw, 3.00rem); --text-h1: clamp(2.75rem, 2.00rem + 3.40vw, 4.25rem); --text-display: clamp(3.25rem, 2.20rem + 5.20vw, 6.00rem); --text-price: 1.0625rem; /* Title Case puts descenders in play. 1.02 was safe for all-caps but risks a 'g' colliding with the cap below it in mixed case, so this sits at 1.06 — still tight and poster-like, with clearance for descenders on any copy. */ --leading-body: 1.6; --leading-tight: 1.06; --leading-inverse: 1.68; --tracking-caps: 0.10em; --tracking-head: 0.01em; --tracking-inverse: 0.015em; --measure: 68ch; /* ---- Spacing (4pt grid) --------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --section-y: clamp(48px, 7vw, 96px); --max-w: 1440px; --max-w-text: 880px; --header-h: 68px; /* ---- Radius --------------------------------------------- Kept tight. Period-correct signage is square-ish; large radii would read as a modern app, not a 1950s deli. */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---- Border --------------------------------------------- 2px is the bold-dial choice: chunky rules read as painted sign panel edges rather than hairline UI chrome. */ --border-width: 2px; --border-width-hair: 1px; --border: var(--border-width) solid var(--color-line); --border-hair: var(--border-width-hair) solid var(--color-line); --border-gold: var(--border-width) solid var(--color-gold); --border-ink: var(--border-width) solid var(--color-ink); /* ---- Shadow (warm-tinted, never neutral black) ---------- */ --shadow-sm: 0 1px 2px rgba(26, 19, 12, 0.08); --shadow-md: 0 6px 18px -10px rgba(26, 19, 12, 0.28); --shadow-lg: 0 18px 40px -20px rgba(26, 19, 12, 0.35); /* ---- Motion --------------------------------------------- */ --ease: cubic-bezier(0.20, 0.60, 0.30, 1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 520ms; } /* Honor reduced-motion at the foundation level. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } }