/* ========================================================================== tokens.css — the design brief, compiled. Qué Chilero Café, Smithfield UT — warm-craft / roast-rust / band-rhythm. Compiled from runs/que-chilero-smithfield-ut/brief.md §3.3, §2, §5, §6.5, §8. Every value below restates a brief value; nothing here is improvised (house-tech-spec §3, §12). TWO CORRECTIONS CARRIED FROM C3 (brief §0.2, c3-gate.md), both purely annotation fixes — no token value or design decision changes: 1. --color-accent-ink on --color-accent is 5.24:1 (not 5.51:1). 2. §4.2's N3 focus-ring-on-band figure is 2.96:1 (not 1.85:1) and N4 is 6.86:1 (not 6.71:1) — both recomputed at the C3 gate. Neither changes which pass/fail: N3 still fails the 3:1 floor (worse), N4 still passes (better). The rule R-A2 that N4 exists to satisfy is unchanged. ========================================================================== */ :root { /* --- Colour -------------------------------------------------------------- Brief §3.1 derivation: step 1 (real-world brand colour) is EMPTY — dossier §4.5 records it BLOCKED, not absent, and nothing is invented to fill it. Step 2: the coffee's own colour arc (roast end, not the cherry-red end) + the family's own cream/domestic register + a highland-jade note for the Guatemala sourcing fact. Step 3: warm-craft's cream/ink/rust family norm. */ --scheme: light; /* one deliberate mode, per design-rules §6 */ --color-bg: #FAF3E8; /* cream — hsl(35, 51%, 92%) */ --color-surface: #F1E4D3; /* deeper paper tint, menu section — hsl(33, 45%, 87%) */ --color-ink: #2B1D14; /* coffee-ink — hsl(20, 36%, 11%) */ --color-ink-muted: #5B4636; /* secondary text — hsl(20, 24%, 26%) */ /* Accent — roast-rust. A text-weight colour on --color-bg only (R-A1). */ --color-accent: #A6502E; /* hsl(17, 55%, 40%) — 5.00:1 on --color-bg (F5) */ --color-accent-ink: #FFF8F0; /* type ON an accent fill — 5.24:1 (F7, corrected at C3) */ /* House-required structural colours (consumed by base.css) */ --color-border: #E4D3BE; /* = --color-rule, brief §3.3 — decorative hairlines only (R-A5) */ --color-focus: #A6502E; /* :focus-visible ring on the page ground — 5.00:1 (N2) */ /* Dark-band-safe focus ring (R-A2). The "Find us" band (§II ink band) is a dark full-bleed ground, and --color-focus (a dark rust) is invisible on it — N3 measures 2.96:1 there, under the 3:1 floor. This is that ring's on-dark sibling — the accent's own on-dark twin, terracotta-floor. */ --color-focus-on-band: #D89B6E; /* 6.86:1 on --color-band (N4, corrected at C3) */ --color-selection-bg: #A6502E; --color-selection-ink: #FFF8F0; /* Secondary accent — highland-jade. Decorative-first: carries the direct- trade Guatemala fact without asserting a place the Scout never saw (brief §3.1). Only ever a hairline/leaf-stem note, never a text colour. */ --color-accent-2: #4F6B4A; /* hsl(123, 18%, 35%) — 5.39:1 on --color-bg if ever set as text (F9) */ /* The one dark band (brief §5.1: rust / cream / ink, colour and role changing together). Reuses --color-ink as a FILL, never a separate hue. */ --color-band: #2B1D14; /* = --color-ink */ --color-band-ink: #FAF3E8; /* = --color-bg, text ON the band — 14.78:1 (F8) */ /* Hero atmosphere (design-rules §0 — never a flat ground). The radial gradient's own stops, promoted from an inline literal to tokens per house-tech-spec §3 (brief §3.3's own changed-from-the-tile note). */ --color-halo-core: #F7E6D2; /* cream-warm core */ --color-halo-mid: #EFCBAE; /* the gradient's stated 42% stop */ --color-halo-floor: #D89B6E; /* terracotta floor */ --color-halo-edge: #B6693D; /* the gradient's stated 100% stop */ --color-rule: #E4D3BE; /* decorative separator only — R-A5, 1.20:1 (N5) */ /* --- Typography ------------------------------------------------------------ Brief §2: EB Garamond (display, static 600 + 600 italic) + Karla (body, static 400 + 700). Four woff2 — design-rules §5's cap, met exactly. Weight is set with font-weight and NOTHING else — R-A4/R7: these are static instances, so font-variation-settings cannot appear on this site at all (house-tech-spec §8's wght-collision trap has nothing to bite on). */ --font-display: 'EB Garamond 600', 'EB Garamond Fallback', Georgia, 'Times New Roman', serif; --font-display-italic: 'EB Garamond 600 Italic', 'EB Garamond Italic Fallback', Georgia, 'Times New Roman', serif; --font-body: 'Karla', 'Karla Fallback', Arial, 'Helvetica Neue', sans-serif; --font-body-strong: 'Karla Strong', 'Karla Strong Fallback', Arial, 'Helvetica Neue', sans-serif; --font-weight-display: 600; --font-weight-body: 400; --font-weight-body-strong: 700; /* --- Type scale (brief §2.8, computed 320/375/768/1024/1440) ------------- */ --text-display: clamp(2.75rem, 2.375rem + 1.6vw, 4rem); --text-h2: clamp(1.5rem, 1.4rem + 0.5vw, 2rem); --text-lead: clamp(1rem, 0.94rem + 0.32vw, 1.25rem); --text-body: 1rem; --text-small: 0.75rem; --text-eyebrow: 0.6875rem; --leading-tight: 1.15; /* h1 */ --leading-snug: 1.30; /* h2 / band .k labels at display size */ --leading-lead: 1.50; /* the lead paragraph */ --leading-body: 1.60; /* body, quotes, descriptions, eyebrow, facts */ --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-caps: 0.18em; /* eyebrow / band .k labels — text-transform: uppercase, never typed in caps */ /* --- Space — the house scale (house-tech-spec §3) ------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* design-rules §7.1's ONE inter-section token. Two call sites only: .section's padding-block, and .hero's padding-block-end (brief §5.6). */ --section-gap: var(--space-xl); /* 64px at every width — fixed rem, no clamp */ /* --- Layout ---------------------------------------------------------------- */ --layout-container: 60rem; /* 960px cap on .section content — brief §5.1 */ --layout-measure: 38rem; /* hero text-column max width, ~608px — brief §5.1 */ --layout-gutter: clamp(1.25rem, 6vw, 2.5rem); --layout-tap-min: 44px; --layout-header-height: calc(var(--layout-tap-min) + var(--space-2xs)); /* 52px, a MIN — brief §5.4 */ /* The hero field — fixed per breakpoint, no clamp (brief §5.2/§3.3). Two token names (house pattern, e.g. bonneville's --hero-field-height-md) rather than a literal redeclared inside a site.css media query. */ --field-height: 236px; --field-height-md: 320px; /* >= 48rem — brief §5.2 */ /* The pour-line — this site's signature mark (brief §6.5, §8). */ --pourline-thickness: 2px; --pourline-width: 96px; /* the drawn hairline's resting width, every section head */ --pourline-floor: 48px; /* hard minimum — what yields when a head is short */ /* --- Builder execution values --------------------------------------------- Component widths the brief does not cite a number for, named here rather than left as bare literals in site.css (house-tech-spec §3) — the same convention bonneville-lawn-care-idaho-falls-id's tokens.css documents for its own --hero-plate-width / --season-card-min / --process-image-*. */ --steam-icon-size: 1.5rem; /* each ambient steam-wisp SVG's rendered width */ --media-rail-width: 12rem; /* the menu bean-study and find-us cherry-specimen image column */ /* --- Radius + border. NO PILL TOKEN EXISTS (brief §6.2). ------------------- */ --radius-none: 0; --border-hairline: 1px; --border-thick: 2px; --border-style: solid; /* --- Motion (brief §8) ------------------------------------------------------- */ --duration-fast: 140ms; --duration-reveal: 380ms; --duration-pour: 800ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --reveal-shift: 0.5rem; /* 8px */ --reveal-stagger: 70ms; --loop-steam-a: 9s; --loop-steam-b: 12.5s; --loop-steam-c: 16s; /* House-required aliases so base.css's reveal system and reduced-motion kill switch (spec §3, §8) resolve against this site's own duration tokens without base.css needing to know their brief-specific names. */ --duration-base: var(--duration-reveal); --duration-slow: var(--duration-reveal); /* §8's reduced-motion frame, value for value — the "steam caught mid-rise" still frame, not a flat static cup. */ --rest-steam-a-transform: translateY(-7px) scaleY(1.09); --rest-steam-a-opacity: 0.75; --rest-steam-b-transform: translateY(-6px) translateX(3px); --rest-steam-b-opacity: 0.70; --rest-steam-c-transform: translateY(-8px) scaleY(1.10); --rest-steam-c-opacity: 0.75; --rest-pourline-scale: 1; /* fully drawn */ --z-base: 0; --z-field: 0; --z-atmosphere: 1; --z-content: 2; --z-header: 100; --z-nav-panel: 200; --z-skip-link: 300; } /* -------------------------------------------------------------------------- @font-face — self-hosted woff2, latin subset, font-display: swap. Static instances (brief §2.2) subset to house-tech-spec §8's declared safe range; identical unicode-range on all four faces. Coverage gap, found at build and recorded per §8, not silently shipped: U+2010, U+2011, U+2012, U+2015, U+2032, U+2033 are inside the declared range and present in both EB Garamond instances but ABSENT from both Karla instances (verified with a fontTools cmap read against the shipped woff2s). This is the asymmetric case house-tech-spec §8 calls "a different matter entirely" from a shared gap — but it is harmless here because NONE of the six render anywhere in this site's shipped copy (the only dash this copy uses is U+2013/U+2014, which every face carries; see README.md). Recorded here rather than narrowing the range, per house convention. -------------------------------------------------------------------------- */ @font-face { font-family: 'EB Garamond 600'; src: url('../assets/fonts/eb-garamond-600-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'EB Garamond 600 Italic'; src: url('../assets/fonts/eb-garamond-italic-600-latin.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'Karla'; src: url('../assets/fonts/karla-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'Karla Strong'; src: url('../assets/fonts/karla-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } /* --- Metrics-matched fallbacks (house-tech-spec §7, §8; brief §2.4) -------- Georgia is the metric donor for both EB Garamond instances (an old-style serif is the natural donor for another old-style serif); Arial for both Karla instances. Measured via canvas.measureText() in headless Chromium against the real shipped woff2 files, loaded through the FontFace API, on a fixed test string; ascent/descent/line-gap overrides computed from each real face's own hhea metrics divided by size-adjust. Full derivation and the stand-in donors actually used to take the measurement (no Georgia or Arial binary is present in the build environment) are in README.md. Acceptance test: Lighthouse CLS 0.000. -------------------------------------------------------------------------- */ @font-face { font-family: 'EB Garamond Fallback'; src: local('Georgia'); size-adjust: 92.9%; ascent-override: 108.4%; descent-override: 32.1%; line-gap-override: 0%; } @font-face { font-family: 'EB Garamond Italic Fallback'; src: local('Georgia'); font-style: italic; size-adjust: 90.3%; ascent-override: 111.5%; descent-override: 33.0%; line-gap-override: 0%; } @font-face { font-family: 'Karla Fallback'; src: local('Arial'), local('Liberation Sans'); size-adjust: 101.3%; ascent-override: 90.5%; descent-override: 24.9%; line-gap-override: 0%; } @font-face { font-family: 'Karla Strong Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 700; size-adjust: 99.8%; ascent-override: 91.9%; descent-override: 25.2%; line-gap-override: 0%; }