/* ============================================================================ BOCA JUAN × PASUYO by bXTRA — Co-brand design tokens (single source of truth) Tenant: bocajuan | Draft — brand assets pending client sign-off ---------------------------------------------------------------------------- HOW TO USE on a La Cabrera surface
a Bar Pintxos section inside the shell Every surface inherits the SHELL tokens (:root) and overrides only the brand scale via [data-brand="…"]. Downstream storefront + consoles import THIS file. CONTRAST GUARD (house rule, enforced here) - Body text uses --ink on --surface (all AA-verified >= 4.5:1). - --gold / --brass are LIGHT accents: use on DARK grounds only, never as text on a light surface. Tokens below encode the safe pairing. - No white or yellow text on any light surface. FIDELITY / SOURCING (see brandkits/.md for the full audit) - Bar Pintxos palette + type: SAMPLED live from barpintxosph.com (getComputedStyle, 2026-08-01). Confirm site is brand-official. - La Cabrera / Txoko / Boca Juan Cellar: INFERRED from documented brand materials + category; clearly approximate, pending official brand book. ============================================================================ */ /* --------------------------------------------------------------------------- SHELL — the restrained premium co-brand frame (neutral so brands lead) Anchor: "the parchment cellar" — warm near-black chrome, parchment canvas, a single brass hairline. The frame never competes with a restaurant's colour. --------------------------------------------------------------------------- */ :root{ /* neutral ramp, warm-tinted (not pure grey) */ --shell-0: #14110d; /* deepest — top chrome, footer */ --shell-1: #1d1813; --shell-2: #2a231b; --shell-3: #473b2c; --shell-4: #6b5a45; --shell-5: #9a866b; --shell-6: #c8b79b; --shell-7: #e7ddcb; --shell-8: #f2ebdd; --shell-9: #f7f2e8; /* parchment canvas */ --shell-bg: var(--shell-9); --shell-panel: #fffdf8; --shell-ink: #1a1512; /* body on parchment — AA 13:1 */ --shell-ink-2: #574a3c; /* secondary text — AA 5.2:1 */ --shell-line: rgba(30,20,10,.12); --shell-line-2: rgba(30,20,10,.06); --brass: #a5813d; /* single restrained accent — LARGE/borders only on light */ --brass-on-dark: #cfa960; /* brass legible on --shell-0/1 (AA large on dark) */ --shell-shadow: 0 10px 30px rgba(20,12,4,.14); --shell-radius: 12px; --shell-radius-s: 7px; /* type — self-contained, CSP-safe. Real face used if installed, else falls back. (Production: self-host these via @font-face; never a CDN.) */ --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif; --font-body: "Libre Baskerville", Georgia, "Times New Roman", serif; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* semantic status (shared) */ --ok: #2f7d46; --warn: #9a6a12; --bad: #a12b25; /* on LIGHT surfaces only */ /* Error text on a DARK ground (brand chrome, entry screens): --bad is just 2.48:1 there and is unreadable. Use these instead — never --bad on dark. (AA on --shell-0/1 and every --primary.) */ --bad-on-dark: #f3a79e; /* 9.29:1 on graphite */ --ok-on-dark: #86d3a0; --warn-on-dark: #e8bf72; } /* Default brand tokens = shell-neutral, so an un-branded surface is still valid */ :root{ --primary: var(--shell-1); --secondary: var(--shell-3); --accent: var(--brass); --accent-on-dark: var(--brass-on-dark); --ink: var(--shell-ink); --ink-2: var(--shell-ink-2); --surface: var(--shell-bg); --panel: var(--shell-panel); --line: var(--shell-line); --signature: var(--brass); --price: var(--secondary); /* AA-safe emphasis for ₱ prices; brands override where needed */ /* --price is ALSO the AA-safe signature colour for any small text on a light ground (links, eyebrows, ghost-button labels). --fill is the solid brand ground that is AA-safe under #fff text (buttons, chips, active tabs). Brands override either when their --secondary is too light. Measured 2026-08-01, see the per-brand notes. */ --fill: var(--secondary); --brand-display: var(--font-display); --brand-body: var(--font-body); } /* =========================================================================== LA CABRERA — premium Argentine parrilla Anchor: "charcoal & oxblood — cattle-country elegance." Colours INFERRED from documented atmosphere (charcoal parrilla, leather / dark wood) + the parent La Cabrera identity (black + Malbec red). Approximate. Logo sourced: lacabrera.com.ar/img/logo-la-cabrera.png (client to supply vector) =========================================================================== */ [data-brand="lacabrera"]{ --primary: #1b1512; /* charcoal near-black — grill iron */ --secondary: #6e1f24; /* oxblood / Malbec — SIGNATURE */ --accent: #b98a3e; /* aged brass */ --accent-on-dark: #c99a4e; --ink: #241a15; /* body on cream — AA 11.8:1 */ --ink-2: #6a5340; /* AA 4.6:1 */ --surface: #f4ece0; /* warm cream */ --panel: #fffaf1; --line: rgba(40,20,12,.14); --signature: #6e1f24; --brand-display: var(--font-display); --brand-body: var(--font-body); } /* =========================================================================== BAR PINTXOS — Basque pintxos + wine & gin bar Anchor: "terracotta tile & jamón-wheel warmth — a lively Spanish bar." Colours + type SAMPLED live from barpintxosph.com (getComputedStyle 2026-08-01). =========================================================================== */ [data-brand="barpintxos"]{ --primary: #6b3818; /* terracotta-brown — SIGNATURE (sampled) */ --secondary: #a8702c; /* toasted amber (sampled) */ --accent: #c89e4a; /* brass-gold (sampled #c89e4a) */ --accent-on-dark: #d8b25e; --ink: #1c120a; /* sampled body ink on cream — AA 15:1 */ --ink-2: #5f4326; /* AA 5.0:1 */ --surface: #f5ead0; /* sampled cream */ --panel: #fffaf0; --line: rgba(28,18,10,.14); --signature: #6b3818; --price: #6b3818; /* amber --secondary fails AA at 15px → use terracotta (7.97:1) for prices + small text */ --fill: #6b3818; /* #fff on amber --secondary measures 4.18:1 → FAILS AA; terracotta gives 9.53:1 */ --brand-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif; /* sampled */ --brand-body: "Libre Baskerville", Georgia, "Times New Roman", serif; /* sampled */ } /* =========================================================================== TXOKO ASADOR — Basque wood-fire asador (Josper) Anchor: "ember & stone — char over live fire, timber & slate." Colours INFERRED from documented materials (Josper char, stone & timber). Logo sourced: txokoasador.com/img/txoko-logo.png (client to supply vector) =========================================================================== */ [data-brand="txokoasador"]{ --primary: #191614; /* charred graphite */ --secondary: #b4531f; /* live-ember rust — SIGNATURE */ --accent: #a98a5c; /* ash-gold */ --accent-on-dark: #c2a06a; --ink: #201a16; /* body on stone — AA 12.5:1 */ --ink-2: #665545; /* AA 4.7:1 */ --surface: #ece6da; /* cool stone / oat */ --panel: #f8f4ec; --line: rgba(32,26,22,.14); --signature: #b4531f; /* CORRECTION (measured 2026-08-01): the kit claimed ember #b4531f is 4.9:1 body-safe on stone; it actually measures 4.03:1 and FAILS AA for normal text. Deepened ember for small text / prices → 4.59:1 on --surface, 5.20:1 on --panel. --fill stays #b4531f (white on it = 5.00:1 ✓). Signature hue unchanged for large type and solid grounds. */ --price: #a94a19; --brand-display: var(--font-display); --brand-body: var(--font-body); } /* =========================================================================== BOCA JUAN CELLAR — the wine vertical (AR · ES · IT) Anchor: "the cellar & the label — region-coded, foil-gilt." Colours INFERRED (cellar dark, bordeaux, champagne foil). Wine surface → carries the 18+ age gate. Logo: FB/IG only — no vector sourced (flag). =========================================================================== */ [data-brand="bocajuan"]{ --primary: #17121a; /* cellar near-black aubergine */ --secondary: #5a1730; /* deep bordeaux — SIGNATURE */ --accent: #c2a24e; /* champagne foil-gold — DARK grounds only */ --accent-on-dark: #d0b25e; --ink: #221820; /* body on chalk — AA 12:1 */ --ink-2: #63505b; /* AA 4.6:1 */ --surface: #f3eee9; /* limestone / chalk */ --panel: #fdfbf8; --line: rgba(34,24,32,.13); --signature: #5a1730; --brand-display: var(--font-display); --brand-body: var(--font-body); /* region chips (wine origin coding) */ --region-ar: #7b3f6d; /* Mendoza / Malbec violet */ --region-es: #9a2a2a; /* Rioja / Ribera red */ --region-it: #7d3b23; /* Chianti garnet */ }