/* ========================================================= tokens.css — Shared Design Tokens (deduped) Drop-in usage: 1) Include this file BEFORE site.css / menu.css (safe, no visual change). 2) Then remove duplicated :root blocks from site.css + menu.css progressively. 3) Optional: add data-theme="site" on homepage templates to lock the luxury palette. ========================================================= */ /* ---------- Base tokens (neutral + menu-friendly defaults) ---------- */ :root { /* Core palette */ --maroon: #7A1E1E; --ink: #1f2328; --text: #1b1b1b; --muted: rgba(27,27,27,0.65); /* shared "muted" */ --bg: #FBF9F5; --panel: #f6f7f9; --card: #ffffff; --border: #e5e7eb; --line: rgba(27,27,27,0.12); /* Surfaces (luxury marketing) */ --surface: rgba(255,255,255,0.72); --surface-2: rgba(255,255,255,0.92); /* Radii */ --radius: 16px; --radius-sm: 14px; /* Shadows */ --shadow: 0 10px 30px rgba(0,0,0,.08); --shadow-soft: 0 12px 30px rgba(0,0,0,0.10); /* Layout */ --container: 1180px; --pad: 24px; /* Fonts */ --serif: "Fraunces", ui-serif, Georgia, serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Motion */ --ease: cubic-bezier(.2,.8,.2,1); --t-fast: 220ms; --t: 320ms; --t-slow: 520ms; /* Common UI sizes */ --checkout-bar-h: 88px; /* menu default */ --dot-size: 10px; /* ---------- Menu button system (menu.css) ---------- */ --btn-radius: 14px; --btn-height: 48px; --btn-padding-x: 16px; --btn-font-weight: 700; --btn-primary-bg: var(--maroon); --btn-primary-bg-hover: #6b0000; --btn-primary-fg: #ffffff; --btn-primary-disabled-bg: #e5e7eb; --btn-primary-disabled-fg: #6b7280; --btn-ghost-bg: #ffffff; --btn-ghost-border: rgba(0,0,0,.12); --btn-ghost-fg: #111827; --btn-focus-ring: rgba(128,0,0,.25); /* ---------- Stepper tokens (menu.css) ---------- */ --step-btn-size: 36px; --step-btn-size-sm: 34px; --step-btn-radius: 10px; --step-btn-bg: #ffffff; --step-btn-border: var(--border); --step-btn-border-hover: rgba(0,0,0,.18); /* ---------- Buffet tokens (kc-*) ---------- */ --kc-radius: 18px; --kc-radius-sm: 14px; --kc-border: rgba(0,0,0,.08); --kc-text: rgba(0,0,0,.90); --kc-muted: rgba(0,0,0,.62); --kc-soft: rgba(0,0,0,.035); --kc-soft-2: rgba(0,0,0,.06); --kc-shadow: 0 10px 30px rgba(0,0,0,.06); --kc-shadow-sm: 0 6px 18px rgba(0,0,0,.06); --kc-ring: 0 0 0 4px rgba(17, 90, 255, .14); /* ---------- Marketing accents (site.css) ---------- */ --accent: #b29a64; /* champagne-gold */ --accent-2: #2f2e2a; /* charcoal */ --focus: rgba(178,154,100,0.25); } /* ---------- Optional theme overrides (recommended) ---------- Use on homepage / brand pages: ... */ :root[data-theme="site"], .theme-site { --bg: #F7F3EC; --radius: 22px; --shadow: 0 18px 50px rgba(0,0,0,0.12); --checkout-bar-h: 94px; /* matches site.css default */ background: radial-gradient(1200px 800px at 8% 6%, rgba(178,154,100,0.08), transparent 60%), radial-gradient(1000px 700px at 92% 10%, rgba(47,46,42,0.04), transparent 65%), var(--bg); } /* Use on ordering / menu pages (explicit, if you want) */ :root[data-theme="menu"], .theme-menu { --bg: #ffffff; --checkout-bar-h: 88px; }