/* * Design tokens — La Barra QR menu. * Source: .claude/fresh-start-design-guidelines.json * * Premium black ramps only, selected via [data-mode] on . Both modes * are strictly neutral grayscale (no blue, no brown/warm hue) — Resto and * Pub are told apart by value/contrast (soft charcoal vs. near-void black), * never by tint. Kept off pure #000 so surfaces still read as "premium * charcoal" rather than a flat, lifeless void. */ :root { /* Spacing scale */ --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px; --sp8: 64px; --sp9: 96px; --sp10: 128px; /* Typography */ --font-display: 'Anton', 'Artifakt Element Heavy', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; --bottom-nav-height: 60px; --header-height: 64px; /* Desktop/tablet content cap for index pages (home, /menu, /eventos) — keeps sections from stretching edge-to-edge on wide screens. Mobile layouts don't use this; they stay full-width as-is. */ --container-max: 1360px; --ease-brand: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 480ms; /* Border/shadow scale — cards/surfaces get a real, visible radius now (previously brutalist zero-radius everywhere); depth is still mostly communicated through border + shadow tiers. */ --shadow-0: none; --border-emphasis: 1.5px; --radius-lg: 20px; /* cards, split-cta panels */ --radius-md: 14px; /* search bars, sticky category nav */ --radius-pill: 999px; /* category badges/chips, tags */ /* * Standalone Pub accent — used to differentiate the Pub half of the * home split-CTA (see split-cta.php) from the Resto half. Sampled from * the [data-mode="pub"] ramp below, but kept mode-independent since the * page itself always renders data-mode="resto" now (no live toggle). */ --pub-bg: #050505; --pub-surface: #121212; --pub-line: rgba(255, 255, 255, .28); --pub-fg: #ffffff; } :root[data-mode="resto"] { /* Soft premium charcoal — strictly neutral grayscale (R=G=B), no navy or brown cast. Sits a step lighter than Pub's near-void black so the two modes still read as distinct through value alone. */ --bg: #0c0c0c; --bg-alt: #111111; --surface-1: #161616; --surface-2: #1e1e1e; --sheen: rgba(255, 255, 255, .05); --fg-primary: #f5f5f5; --fg-secondary: #cccccc; --fg-tertiary: #8f8f8f; --line-subtle: rgba(255, 255, 255, .08); --line: rgba(255, 255, 255, .16); --line-strong: rgba(255, 255, 255, .32); --shadow-elevation: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 16px 32px -20px rgba(0, 0, 0, .65); --shadow-1: var(--shadow-elevation); --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 56px -22px rgba(0, 0, 0, .78); --shadow-3: 0 34px 84px -22px rgba(0, 0, 0, .88); --shadow-glow: 0 0 22px 2px rgba(255, 255, 255, .24); --image-filter: none; --letter-tracking: 0em; --bg-grid-opacity: 0.035; --hero-title-size: clamp(52px, 11vw, 132px); --switch-track-color: #1a1a1a; --metal-line: rgba(255, 255, 255, .5); } :root[data-mode="pub"] { /* Near-void black — strictly neutral grayscale, a touch deeper/higher contrast than Resto so the split-cta and mode switch still feel distinct without leaning on any hue at all. */ --bg: #050505; --bg-alt: #090909; --surface-1: #0d0d0d; --surface-2: #131313; --sheen: rgba(255, 255, 255, .06); --fg-primary: #ffffff; --fg-secondary: #d9d9d9; --fg-tertiary: #999999; --line-subtle: rgba(255, 255, 255, .10); --line: rgba(255, 255, 255, .20); --line-strong: rgba(255, 255, 255, .38); --shadow-elevation: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 36px -20px rgba(0, 0, 0, .8); --shadow-1: var(--shadow-elevation); --shadow-2: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 32px 64px -22px rgba(0, 0, 0, .92); --shadow-3: 0 38px 96px -22px rgba(0, 0, 0, .96); --shadow-glow: 0 0 26px 3px rgba(255, 255, 255, .32); --image-filter: none; --letter-tracking: -0.015em; --bg-grid-opacity: 0.07; --hero-title-size: clamp(58px, 13vw, 158px); --switch-track-color: #050505; --metal-line: rgba(255, 255, 255, .55); }