/* ============================================================================= Pacific Avenue Bowl - Brand tokens Stockton's home for bowling since 1958. This file is the SINGLE source of truth for the Pacific Avenue Bowl look: a warm, friendly, retro-since-1958 family bowling identity drawn from the house crest (navy ball, retro-red ribbon, gold ring, warm cream field). The site consumes these by NAME. Do NOT hardcode hex in the site; if a token is missing at build time, fall back to a neutral and flag it. PER-FAMILY ISOLATION: these are Pacific Avenue Bowl assets only. Never import another family's theme here, and never copy this palette into another family's site. Contrast: every text/UI pairing below is tuned to meet the UX-SPEC Section 6 WCAG AA ratios (body/UI >= 4.5:1, large text >= 3:1, non-text UI >= 3:1). ============================================================================= */ :root { /* --------------------------------------------------------------------------- COLOR - roles (UX-SPEC Section 0). Real palette behind role-based names. --------------------------------------------------------------------------- */ /* Surfaces */ --pab-bg: #faf4e8; /* page background - warm cream, off the crest field */ --pab-surface: #fffdf8; /* card / panel surface - soft warm white */ --pab-surface-2: #f1e7d2; /* raised / selected surface - cream-gold tint */ /* Text / ink */ --pab-ink: #16224b; /* primary text - deep crest navy (14:1 on --pab-bg) */ --pab-ink-muted: #5b5240; /* secondary text - warm brown-gray (7:1 on --pab-bg) */ /* Brand primary - the retro-red Reserve CTA + active states */ --pab-primary: #bc2c20; /* crest ribbon red (5.96:1 with white text) */ --pab-primary-ink: #ffffff; /* text/icon on --pab-primary */ --pab-primary-hover: #a3261b; --pab-primary-active: #8c2017; /* Brand accent - retro lane / marquee gold */ --pab-accent: #f4b740; /* crest gold ring */ --pab-accent-ink: #16224b; /* text/icon on --pab-accent (8.5:1) */ --pab-accent-hover: #e6a92f; /* Lines / borders / dividers (>= 3:1 against surfaces for form fields) */ --pab-line: #a88f5f; /* vintage tan-brown (3.1:1 on white surface) */ --pab-line-soft: #e3d7bb; /* quiet divider for low-emphasis separators */ /* Focus ring - deep navy. ALWAYS pair with outline-offset (>= 2px) so the ring renders over the cream page (14:1) and stays >= 3:1 on every surface. */ --pab-focus: #14213d; /* States */ --pab-success: #1f7a3d; /* confirmation (5.38:1 with white text) */ --pab-success-ink: #ffffff; --pab-success-tint: #e6f1e6; /* success panel background */ --pab-warning: #b5611a; /* "needs attention" / SAMPLE-DATA + demo notices */ --pab-warning-ink: #ffffff; /* on --pab-warning, bold/caps badge text */ --pab-warning-tint: #fbeede; /* quiet demo-notice background */ /* Hero scrim - layer behind hero text so body copy stays >= 4.5:1 over art. Apply as a background-image over the hero art. */ --pab-hero-scrim: linear-gradient( 180deg, rgba(11, 18, 48, 0.18) 0%, rgba(11, 18, 48, 0.55) 70%, rgba(11, 18, 48, 0.72) 100% ); /* --------------------------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------------------------- */ /* Display / marquee face - a classic 1950s slab, matches the crest serif. Fast: ships on most systems, no web-font download required. */ --pab-font-display: "Rockwell", "Roboto Slab", "Georgia", "Times New Roman", serif; /* Body / UI - friendly, highly legible at the 18px base. System stack = fast. */ --pab-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Type scale - base 18px (accessibility floor; nothing below 16px). rem @16. */ --pab-text-sm: 1rem; /* 16px - smallest allowed (footnotes, eyebrow) */ --pab-text-base: 1.125rem; /* 18px - body + UI default */ --pab-text-md: 1.25rem; /* 20px - lead lines, large controls */ --pab-text-lg: 1.5rem; /* 24px - h3 / card titles */ --pab-text-xl: 1.875rem; /* 30px - h2 section titles */ --pab-text-2xl: 2.25rem; /* 36px - large h2 / sub-hero */ --pab-text-3xl: 3rem; /* 48px - h1 hero */ /* Line height */ --pab-leading-body: 1.5; --pab-leading-heading: 1.2; /* Weight */ --pab-weight-body: 400; --pab-weight-medium: 600; --pab-weight-bold: 700; /* Letter spacing */ --pab-tracking-display: 0.01em; --pab-tracking-eyebrow: 0.14em; /* small caps eyebrow labels */ /* --------------------------------------------------------------------------- SPACING - 8px base scale (drives the UX-SPEC rhythm) --------------------------------------------------------------------------- */ --pab-space-3xs: 4px; --pab-space-2xs: 8px; --pab-space-xs: 12px; --pab-space-sm: 16px; --pab-space-md: 24px; --pab-space-lg: 32px; --pab-space-xl: 48px; /* section padding, mobile */ --pab-space-2xl: 64px; --pab-space-3xl: 80px; /* section padding, md+ */ --pab-space-4xl: 96px; /* Layout */ --pab-container-max: 1200px; --pab-container-pad: 20px; /* side padding, mobile */ --pab-container-pad-md: 32px; /* side padding, md+ */ --pab-section-pad: var(--pab-space-xl); /* 48px mobile */ --pab-section-pad-md: var(--pab-space-3xl); /* 80px md+ */ /* Tap targets (accessibility) */ --pab-tap-min: 44px; /* minimum interactive target */ --pab-tap-primary: 48px; /* primary actions + reservation chips/steppers */ --pab-tap-gap: 8px; /* minimum gap between adjacent targets */ /* --------------------------------------------------------------------------- RADII --------------------------------------------------------------------------- */ --pab-radius-sm: 8px; --pab-radius: 12px; /* default corner radius */ --pab-radius-lg: 18px; /* hero / large panels */ --pab-radius-pill: 999px; /* chips / pills */ /* --------------------------------------------------------------------------- SHADOWS - warm navy-tinted elevation --------------------------------------------------------------------------- */ --pab-shadow: 0 1px 2px rgba(20, 33, 61, 0.08), 0 2px 8px rgba(20, 33, 61, 0.10); /* default elevation (cards, scrolled nav) */ --pab-shadow-pop: 0 8px 24px rgba(11, 18, 48, 0.22), 0 2px 6px rgba(11, 18, 48, 0.16); /* modal / chat elevation */ /* --------------------------------------------------------------------------- MOTION (honor prefers-reduced-motion in the site, not here) --------------------------------------------------------------------------- */ --pab-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --pab-duration: 200ms; }