/* ============================================================ Yoga Studio Trieste Mockup — Design tokens Tre varianti colore+font (A1/A2/A3) x tema light/dark Selettore: ============================================================ */ /* ---------- Valori di base comuni ---------- */ :root { --radius-sm: 12px; --radius: 18px; --radius-lg: 28px; --radius-pill: 999px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6.5rem; --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06); --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.12); --container: 1180px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ============ VARIANTE A1 — Terracotta & Calma ============ Font: Fraunces (display) + Inter (corpo) */ html[data-variant="1"] { --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, sans-serif; --font-script: "Caveat", cursive; } html[data-variant="1"][data-theme="light"] { --bg: #faf6f1; --bg-alt: #f2ebe1; --surface: #ffffff; --ink: #2b2622; --ink-soft: #5c544c; --line: #e7ddd0; --accent: #c0643f; /* terracotta */ --accent-ink: #ffffff; --accent-2: #7a8f7c; /* salvia */ --accent-2-ink: #ffffff; } html[data-variant="1"][data-theme="dark"] { --bg: #191613; --bg-alt: #201c18; --surface: #26211c; --ink: #f1eae1; --ink-soft: #b9ada1; --line: #383128; --accent: #d07a52; /* terracotta chiaro */ --accent-ink: #1c130c; --accent-2: #8ba08d; --accent-2-ink: #161c17; } /* ============ VARIANTE A2 — Bronzo & Sabbia ============ Font: Cormorant Garamond (display) + Montserrat (corpo) */ html[data-variant="2"] { --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Montserrat", system-ui, sans-serif; --font-script: "Great Vibes", cursive; } html[data-variant="2"][data-theme="light"] { --bg: #f6f0e7; --bg-alt: #efe6d8; --surface: #fdfaf5; --ink: #2c261f; --ink-soft: #6b6153; --line: #e2d5c3; --accent: #a87248; /* bronzo */ --accent-ink: #ffffff; --accent-2: #85805a; /* oliva */ --accent-2-ink: #ffffff; } html[data-variant="2"][data-theme="dark"] { --bg: #1a1511; --bg-alt: #211b14; --surface: #2a2218; --ink: #efe8dc; --ink-soft: #b6a896; --line: #403427; --accent: #c08a58; --accent-ink: #1c1308; --accent-2: #a3a07e; --accent-2-ink: #17160f; } /* ============ VARIANTE A3 — Salvia & Terracotta spento ============ Font: Playfair Display (display) + Work Sans (corpo) */ html[data-variant="3"] { --font-display: "Playfair Display", Georgia, serif; --font-body: "Work Sans", system-ui, sans-serif; --font-script: "Caveat", cursive; } html[data-variant="3"][data-theme="light"] { --bg: #f4f1e9; --bg-alt: #ebe6d9; --surface: #fbfaf6; --ink: #23302a; --ink-soft: #5c6862; --line: #dfe0d5; --accent: #6d8276; /* salvia */ --accent-ink: #ffffff; --accent-2: #b55f41; /* terracotta spento */ --accent-2-ink: #ffffff; } html[data-variant="3"][data-theme="dark"] { --bg: #131916; --bg-alt: #18201b; --surface: #1c2520; --ink: #e9ede8; --ink-soft: #a3aca5; --line: #2f3b34; --accent: #86a08f; --accent-ink: #131a15; --accent-2: #c77c5c; --accent-2-ink: #1b120c; }