/* ============================================================ SFIZIO v2 — design tokens (INDEPENDENT of the rms/website set) Dark cinematic editorial. One lever for the whole design lab. ============================================================ */ :root { /* ---- ground ---- */ --bg: #0e0b09; /* espresso black — page ground */ --bg-2: #16110d; /* raised ground / alternating sections */ --surface: #1e1712; /* cards, sheets, dock */ --surface-2: #27201a; /* hover / pressed surface */ --ink: #f6efe3; /* cream text */ --muted: #ab9d8b; /* secondary text on dark ground */ --line: rgba(246, 239, 227, 0.12); --line-strong: rgba(246, 239, 227, 0.24); --scrim: rgba(14, 11, 9, 0.55); /* ---- concept accents (the three-way identity) ---- */ --pizza: #ff4d2e; /* ember — Pizza */ --pizza-deep: #a8200c; --street: #c8e650; /* citrus — Street */ --street-deep: #5f7a12; --dining: #e6b54a; /* gold — Dining */ --dining-deep: #8a6414; --wine: #8d2f3f; /* semantic */ --act: var(--pizza); /* default primary action = brand ember */ --ok: #7cc46a; --danger: #e5533d; /* ---- type ---- */ --font-display: "Fraunces", "Georgia", serif; --font-ui: "Archivo", system-ui, sans-serif; /* fluid scale, mobile-first (min @360px viewport → max @900px) */ --fs-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem); --fs-sm: clamp(0.84rem, 0.8rem + 0.25vw, 0.95rem); --fs-md: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); --fs-lg: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem); --fs-xl: clamp(1.6rem, 1.4rem + 1.2vw, 2.2rem); --fs-2xl: clamp(2.1rem, 1.7rem + 2.4vw, 3.4rem); --fs-display: clamp(2.6rem, 1.9rem + 4.5vw, 5rem); /* ---- space / shape / elevation ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.5); /* ---- motion ---- */ --ease: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like decel */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot for micro */ --dur-1: 160ms; --dur-2: 320ms; --dur-3: 640ms; /* ---- layout ---- */ --page-max: 74rem; --gutter: clamp(1rem, 4vw, 2.5rem); --nav-h: 3.5rem; --dock-h: 4.25rem; /* floating cart dock reserve (thumb zone) */ color-scheme: dark; } /* ============================================================ PER-PAGE IDENTITIES — set . Components consume only tokens, so a palette swap here re-skins a page. (default :root = landing: dark cinematic) ============================================================ */ /* PANINI & SALAD BAR — crisp, fresh, organic. Warm cream/almond ground, basil green + toasted crust accents. LIGHT page. */ [data-theme="panini"] { --bg: #f3e9d7; --bg-2: #ebdfc8; --surface: #faf3e6; --surface-2: #efe4d0; --ink: #26221a; --muted: #6f6754; --line: rgba(38, 34, 26, 0.14); --line-strong: rgba(38, 34, 26, 0.28); --scrim: rgba(243, 233, 215, 0.62); --act: #4d7c26; /* basil */ --street: #4d7c26; --street-deep: #3a5f1c; --crust: #b3742c; /* toasted crust */ --shadow-1: 0 2px 10px rgba(96, 78, 44, 0.16); --shadow-2: 0 12px 40px rgba(96, 78, 44, 0.22); color-scheme: light; } /* PIZZA — warm, artisanal, wood-fired. Muted terracotta/clay ground, deep tomato red + charcoal accents. The live page. */ [data-theme="pizza"] { --bg: #a95c41; /* muted terracotta */ --bg-2: #9c5239; /* deeper clay */ --surface: #b76a4d; --surface-2: #c2795b; --ink: #fdf3e7; --muted: #f0d9c4; --line: rgba(30, 18, 12, 0.22); --line-strong: rgba(30, 18, 12, 0.4); --scrim: rgba(52, 24, 14, 0.55); --act: #8f1d0e; /* deep tomato */ --pizza: #ffd9a8; /* ember highlight on clay */ --pizza-deep: #7c1a0c; --charcoal: #241a14; --shadow-1: 0 2px 10px rgba(52, 24, 14, 0.3); --shadow-2: 0 12px 40px rgba(52, 24, 14, 0.45); color-scheme: dark; } /* RISTORANTE — intimate, high-end, slow. Deep espresso/charcoal ground, warm gold/champagne accents. */ [data-theme="ristorante"] { --bg: #130f0b; --bg-2: #1a140e; --surface: #221a12; --surface-2: #2c2318; --ink: #f2e9d8; --muted: #b5a488; --line: rgba(242, 233, 216, 0.12); --line-strong: rgba(242, 233, 216, 0.26); --scrim: rgba(19, 15, 11, 0.6); --act: #b98a2e; /* warm gold */ --dining: #dcb765; --dining-deep: #8a6414; --champagne: #ecdcb4; color-scheme: dark; }