/* ============================================================= Bottle Brothers — venue theme (DEC-016, 3 levels) 1 primitives → 2 semantic / alias → 3 component Components consume ONLY level 2 (and 3). Never level 1 directly. This is a VENUE theme layered on the Ospitalitta token contract. The role names in level 2 are the SHARED contract every venue fills; BB swaps in its own primitives + type families + a few component overrides (sharp paper edges, round-only-in-app). No new roles. Scope it under the venue route so app components read these vars: [data-venue="bottle-brothers"] { ... } In Next this lives on the /venue/[id] layout wrapper. Sources of truth: CLAUDE.md (BB brand block) + the prototype "BB Menu Mobile v2.dc.html" + "BB Brand Foundations.dc.html". Every value below is documented, none invented. ============================================================= */ /* ---------- 1 · PRIMITIVES — BB raw values ---------- */ :root { /* surfaces (paper world + dark world) */ --bb-cream: #F3F0E7; /* paper, the default screen surface */ --bb-card: #F7F3EA; /* item card backing */ --bb-card-active: #F0EBDD; /* card on press */ --bb-frame: #ECE7D6; /* framed plaque (recommend, note) */ --bb-media: #ECE6D4; /* photo/video placeholder backing */ --bb-char: #1C1E1B; /* working dark surface / app shell */ --bb-char-deep: #15110E; /* deepest near-black: bar + dark notices */ --bb-white: #FFFFFF; /* logo backing ONLY */ /* ink */ --bb-ink: #181817; /* names, max contrast */ --bb-ink-heading: #3F4445; /* section / sheet headings (muted ink) */ --bb-ink-body: #494E4F; /* detail description body */ --bb-ink-body-2: #3A3933; /* card description body */ --bb-on-dark: #F2E9DA; /* light text on char */ --bb-on-dark-2: #E9E3D5; /* secondary light text on char */ /* olive — ONE colour, a family of three by surface */ --bb-olive-logo: #9CAA40; /* logo, hairlines/borders, on char */ --bb-olive-cream: #7E8C50; /* on cream: prices, labels, glyph, loved-here */ --bb-olive-app: #9BA86A; /* app UI accent (active underline, badge) */ --bb-olive-bright: #A9B978; /* brighter olive on char (totals, links) */ --bb-olive-hi: #B6C07A; /* olive highlight droplet */ --bb-cherry: #C7503B; /* olive PIT only, nothing else */ /* neutral UI grey — borders, inactive, dividers (always as rgba) */ --bb-grey: 84 89 90; /* use rgb(var(--bb-grey) / ) */ /* type families */ --bb-font-display: 'Marcellus', serif; /* names, headings */ --bb-font-text: 'Jost', sans-serif; /* everything else */ /* type scale — modular ~1.333, body never below 16. Expressed in rem so the in-app A-size control can scale the whole system by setting --font-scale on (see component layer). */ --bb-fs-9: 0.5625rem; /* micro labels (recommend eyebrow, footer) */ --bb-fs-10: 0.625rem; /* section subhead */ --bb-fs-11: 0.6875rem; /* "?" button, "Prices in Lekë" */ --bb-fs-12: 0.75rem; /* caption, cart badge, "Show your waiter" */ --bb-fs-13: 0.8125rem; /* prices, tab labels, food desc */ --bb-fs-135: 0.84375rem; /* card descriptions, notice text */ --bb-fs-14: 0.875rem; /* pairing label, pairing row names */ --bb-fs-15: 0.9375rem; /* card/list names, legend rows */ --bb-fs-16: 1rem; /* food name, detail description */ --bb-fs-17: 1.0625rem; /* detail name */ --bb-fs-21: 1.3125rem; /* section headings (Marcellus uppercase) */ --bb-fs-23: 1.4375rem; /* sheet heading */ --bb-fs-24: 1.5rem; /* list total, + on photo */ --bb-fs-30: 1.875rem; /* detail FAB + */ /* spacing — 4px base (shared with core) */ --bb-sp-1: 4px; --bb-sp-2: 8px; --bb-sp-3: 12px; --bb-sp-4: 16px; --bb-sp-5: 18px; --bb-sp-6: 24px; --bb-sp-7: 32px; --bb-sp-8: 48px; /* radius — paper is sharp, app gets roundness only where a finger needs it */ --bb-r-card: 0; /* cards, plaques, anything paper */ --bb-r-sheet: 26px 26px 0 0; /* bottom-sheet top corners */ --bb-r-pill: 999px; /* counter / badge */ --bb-r-round: 50%; /* +, stepper, dots */ /* motion — left/gold soft, right/ember sharp (core principle). Sheets glide up (soft). Press feedback is an instant hard cut. */ --bb-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --bb-dur-sheet: 300ms; --bb-dur-dim: 220ms; } /* ---------- 1b · DARK-WORLD DERIVATIONS ---------- BB documents two dark surfaces (--bb-char = app shell, --bb-char-deep = bar/notices) but no LIFTED card surface, because until now dark was an accent against paper, never the page itself. A dark page needs elevation. These three are DERIVED from BB's own primitives (char + on-dark) using the same color-mix idiom globals.css already uses for --surface-media. No new hues are introduced. They are still not in "BB Brand Foundations.dc.html", so per this file's own rule they need founder sign-off before shipping. ⚠️ [needs sign-off — see DEC on BB dark theme] */ :root { --bb-char-card: color-mix(in srgb, var(--bb-char) 94%, var(--bb-on-dark) 6%); --bb-char-card-a: color-mix(in srgb, var(--bb-char) 89%, var(--bb-on-dark) 11%); --bb-char-frame: color-mix(in srgb, var(--bb-char) 91%, var(--bb-on-dark) 9%); } /* ---------- 2 · SEMANTIC / ALIAS — the ONLY layer app UI reads ---------- */ [data-venue="bottle-brothers"] { --surface: var(--bb-cream); --surface-card: var(--bb-card); --surface-card-a: var(--bb-card-active); --surface-frame: var(--bb-frame); --surface-media: var(--bb-media); --surface-dark: var(--bb-char); --surface-dark-2: var(--bb-char-deep); --surface-logo: var(--bb-char); /* olive logo is drawn to sit on char, not paper */ --ink: var(--bb-ink); --ink-heading: var(--bb-ink-heading); --ink-body: var(--bb-ink-body); --ink-body-2: var(--bb-ink-body-2); --on-dark: var(--bb-on-dark); --on-dark-2: var(--bb-on-dark-2); /* brand olive resolves per surface: on cream vs on char */ --brand: var(--bb-olive-cream); /* default, on paper */ --brand-on-dark: var(--bb-olive-app); --brand-bright: var(--bb-olive-bright); --price: var(--bb-olive-app); /* a step greener than brand so the number pops off the name */ --hairline: var(--bb-olive-logo); /* olive borders/frames */ --accent-pit: var(--bb-cherry); --line: rgb(var(--bb-grey) / 0.18); /* dividers/borders */ --line-strong: rgb(var(--bb-grey) / 0.35); /* section underline */ --line-soft: rgb(var(--bb-grey) / 0.12); /* card borders */ --ink-faint: rgb(var(--bb-grey) / 0.5); /* inactive tab text */ --font-display: var(--bb-font-display); --font-text: var(--bb-font-text); } /* ---------- 2-dark · SEMANTIC OVERRIDE — BB dark theme ---------- Same roles, repointed at BB's dark world. Level 3 and every component inherit this for free (DEC-016: components read level 2 only). Elevation: page = --bb-char (documented "app shell"), bar/FAB = --bb-char-deep (documented "bar"), so the bar stays darker than the page. Turn on with data-theme="dark" on the /venue/[id] wrapper; remove the attribute and the paper world above is untouched. */ [data-venue="bottle-brothers"][data-theme="dark"] { --surface: var(--bb-char); --surface-card: var(--bb-char-card); --surface-card-a: var(--bb-char-card-a); --surface-frame: var(--bb-char-frame); --surface-media: var(--bb-char-deep); /* photo slot goes dark */ --surface-dark: var(--bb-char-deep); --surface-dark-2: var(--bb-char-deep); --ink: var(--bb-on-dark); --ink-heading: var(--bb-on-dark-2); --ink-body: color-mix(in srgb, var(--bb-on-dark-2) 82%, transparent); --ink-body-2: color-mix(in srgb, var(--bb-on-dark-2) 82%, transparent); /* olive resolves to its on-char family — all three already documented */ --brand: var(--bb-olive-bright); --brand-on-dark: var(--bb-olive-app); --brand-bright: var(--bb-olive-hi); --price: var(--bb-olive-hi); /* brightest olive so the number reads on char */ --hairline: var(--bb-olive-logo); /* lines/faint ink must come off --bb-on-dark, not --bb-grey: grey at 0.5 over char lands ~rgb(56,60,58) — a divider that works, but text that does not. Dividers keep working either way; ink-faint would not. */ --line: color-mix(in srgb, var(--bb-on-dark) 16%, transparent); --line-strong: color-mix(in srgb, var(--bb-on-dark) 30%, transparent); --line-soft: color-mix(in srgb, var(--bb-on-dark) 10%, transparent); --ink-faint: color-mix(in srgb, var(--bb-on-dark) 45%, transparent); } /* ---------- 3 · COMPONENT — local, pulls from semantic ---------- */ [data-venue="bottle-brothers"] { /* item card */ --card-bg: var(--surface-card); --card-bg-active: var(--surface-card-a); --card-border: var(--line-soft); --card-radius: var(--bb-r-card); --card-shadow: 0 2px 10px rgb(21 17 14 / 0.10); --card-peek-scrim: rgb(21 17 14 / 0.4); --card-peek-bg: rgb(21 17 14 / 0.34); --card-peek-fg: #fff; /* bottom sheet */ --sheet-bg: var(--surface); --sheet-radius: var(--bb-r-sheet); --sheet-scrim: rgba(21, 17, 14, 0.5); /* floating "show your waiter" bar */ --bar-bg: var(--surface-dark-2); --bar-fg: var(--on-dark); --bar-accent: var(--brand-bright); /* round + / FAB */ --fab-bg: var(--surface-dark-2); --fab-fg: var(--on-dark); --fab-radius: var(--bb-r-round); /* active tab underline */ --tab-underline: var(--brand-on-dark); /* badge / aux label pill */ --badge-weight: 500; --badge-size: 0.5rem; --badge-color: var(--brand-bright); --badge-bg: var(--surface-frame); --badge-border: 1px solid var(--brand); --badge-radius: 0px; --badge-padding: 3px 6px; /* featured pick box */ --pick-bg: var(--surface-frame); --pick-border-color: var(--brand); --pick-label-color: var(--brand-bright); --pick-muted: var(--ink-faint); /* section note callout */ --note-bg: var(--surface-frame); --note-border-color: var(--brand); --note-text-color: var(--ink-body); /* section sub (right of section title) */ --section-sub-color: var(--ink-faint); --section-sub-size: 0.625rem; /* in-app accessibility text scale — A-size control writes this on . Steps: 0.9 / 1 / 1.15 / 1.3 ; persisted in localStorage['font_scale']. */ --font-scale: 1; } /* ---------- 3-dark · COMPONENT OVERRIDE ---------- Only what breaks when the page itself goes dark. */ [data-venue="bottle-brothers"][data-theme="dark"] { /* The + sits on the media slot, and the media slot is now the same char-deep as the FAB — it would vanish. Flip it to olive-on-char. ⚠️ [needs sign-off — changes what the FAB means chromatically] */ --fab-bg: var(--bb-olive-bright); --fab-fg: var(--bb-char-deep); /* scrim must go deeper than the page, or the sheet stops reading as raised */ --sheet-scrim: rgba(10, 8, 6, 0.66); } /* root font-size carries the A-size scale (html { font-size: calc(100% * var(--font-scale)) }) */