/** * tokens.css * ----------------------------------------------------------------------- * Single source of default design tokens as CSS custom properties. * theme.js overrides --color-* and --font-* at runtime via * documentElement.style.setProperty(), using values from * restaurant.json → theme.colors / theme.fonts. Everything else in the * codebase (style.css, animations.css, responsive.css) MUST reference * these variables instead of hardcoding values, so a client swap is * zero-code. * ----------------------------------------------------------------------- */ :root { /* ---------- Color tokens (locked default palette) ---------- */ --color-primary: #C9A15A; --color-secondary: #8B1E2F; --color-background: #0F0F10; --color-surface: #1A1A1C; --color-text: #F5F1E8; --color-text-muted: #A8A29A; --color-success: #6B8E5A; --color-error: #B33A3A; /* Derived/utility color tokens built from the above so components don't re-declare rgba() combinations by hand. */ --color-overlay: rgb(15 15 16 / 82%); --color-border: rgb(245 241 232 / 10%); --color-shadow: rgb(0 0 0 / 45%); --color-focus-ring: var(--color-primary); /* ---------- Font tokens ---------- */ --font-heading: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; /* ---------- Type scale (mobile defaults; desktop set in responsive.css) ---------- */ --font-size-hero: 2.5rem; --font-size-section: 1.75rem; --font-size-dish-name: 1.125rem; --font-size-body: 0.9375rem; --font-size-price: 1.125rem; --font-size-small: 0.8125rem; --line-height-heading: 1.15; --line-height-body: 1.5; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---------- Spacing scale (8px base unit) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; /* ---------- Radius ---------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* ---------- Shadows ---------- */ --shadow-card: 0 8px 24px var(--color-shadow); --shadow-card-hover: 0 16px 40px var(--color-shadow); --shadow-modal: 0 24px 64px var(--color-shadow); /* ---------- Layout ---------- */ --content-max-width: 1200px; --nav-height: 64px; --header-height: 56px; /* ---------- Z-index scale (centralized to avoid stacking bugs) ---------- */ --z-base: 1; --z-header: 10; --z-floating-nav: 20; --z-fab: 25; --z-filters-bar: 15; --z-modal: 40; --z-loader: 50; /* ---------- Motion ---------- */ --ease-out-standard: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 0.2s; --duration-base: 0.4s; --duration-slow: 0.6s; } /** * ---------- Light mode ---------- * themeToggle.js toggles [data-theme="light"] on and ALSO writes * --color-background/--color-surface/--color-text/--color-text-muted as * inline styles (needed to win over theme.js's brand-color inline * styles — see themeToggle.js's doc comment for why). The three tokens * below are pure derivations (rgba mixes) that don't need that inline * trick, so they live here as ordinary selector-based overrides. */ [data-theme="light"] { --color-border: rgb(15 15 16 / 10%); --color-shadow: rgb(0 0 0 / 12%); --color-overlay: rgb(250 250 248 / 85%); }