/* ============================================================================= Il Bosco Allegro — Theme (sorgente condivisa del telaio visivo) ---------------------------------------------------------------------------- Token narrativi + scale + tipografia + spacing + raggi + ombre verde-bosco. Sorgente unica per home, schede personaggio, mappa, club, accademia, reader. Migrazione futura a `design-system/theme.css` (Astro) indolore: stessi nomi. Documentazione operativa: piano/02-brand-visual.md §2.1–2.5 del progetto bosco-benchmark-naila. Modifiche QUI propagano a tutto il sito. NB: il font loader Google (Fraunces + Source Serif 4 + Inter) va incluso in da ogni pagina che usa questo theme. Vedi index.html. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400..600,30..100,0..1&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600;1,8..60,400&family=Inter:wght@400;500;600&display=swap'); :root { /* ===== Palette narrativa (4 fissi) ====================================== */ --bosco-500: #2F5D3A; /* Verde Bosco narrativo */ --ghianda-500: #B97A3A; /* Ghianda Noce narrativo — CTA */ --carta-500: #F4ECD8; /* Crema Carta narrativo */ --inchiostro: #1E2A20; /* Inchiostro Bosco narrativo */ /* Scala bosco — gli step in uso oggi */ --bosco-50: #F4F8F2; --bosco-100: #E0EBDD; --bosco-200: #BDD3B7; --bosco-400: #5C8A52; --bosco-600: #264C2F; /* hover di --bosco-500 */ --bosco-700: #1E3D26; /* outline scuri su crema */ --bosco-800: #16301D; /* bg dark mode */ --bosco-900: #0E1F13; /* Scala ghianda */ --ghianda-300: #DEB68A; --ghianda-400: #C99055; --ghianda-600: #A56B30; /* hover CTA (AA strict su crema) */ --ghianda-700: #884F1F; /* Carta */ --carta-100: #FBF7EC; --carta-200: #F8F1DF; /* Neutri caldi */ --neutro-300: #BDB59E; --neutro-500: #6E6A5A; --neutro-700: #4A4838; /* ===== Tipografia ===================================================== */ --ff-display: 'Fraunces', Georgia, serif; --ff-body: 'Source Serif 4', Georgia, serif; --ff-ui: 'Inter', system-ui, sans-serif; /* Scala modulare 1.250 (terza maggiore) ancorata a 18px body */ --fs-xs: 13.5px; --fs-sm: 15px; --fs-base: 18px; --fs-md: 22.5px; --fs-lg: 28px; --fs-xl: 35px; --fs-2xl: 44px; /* hero clamp gestito inline su h1 */ /* Variation-settings normati (un solo preset per ruolo) */ --fraunces-hero: "opsz" 96, "SOFT" 30, "WONK" 1; --fraunces-h2: "opsz" 60, "SOFT" 20, "WONK" 0; --fraunces-h3: "opsz" 36, "SOFT" 30, "WONK" 0; --fraunces-cta: "opsz" 24, "SOFT" 50, "WONK" 0; --fraunces-chapter: "opsz" 72, "SOFT" 10, "WONK" 1; --source-body: "opsz" 12; --source-intro: "opsz" 24; --inter-ui: "opsz" 14; /* ===== Spacing scala 8px ============================================= */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 192px; /* ===== Raggi ========================================================= */ --r-card: 16px; --r-button: 12px; --r-input: 10px; --r-medaglione: 50%; --r-pill: 999px; /* ===== Ombre — sempre tinta verde-bosco, mai grigio puro ============ */ --shadow-sm: 0 2px 6px rgba(46, 93, 58, 0.10); --shadow-md: 0 8px 24px rgba(46, 93, 58, 0.18); --shadow-lg: 0 24px 56px rgba(46, 93, 58, 0.22); /* ===== Layout ========================================================= */ --max-w: 1140px; } /* ============================================================================= Preset tipografici riusabili — `class="ff-hero"` ecc. Non sovrascrivono i token: facilitano la composizione nelle pagine. ============================================================================= */ .ff-hero { font-family: var(--ff-display); font-variation-settings: var(--fraunces-hero); font-weight: 500; } .ff-h2 { font-family: var(--ff-display); font-variation-settings: var(--fraunces-h2); font-weight: 500; } .ff-h3 { font-family: var(--ff-display); font-variation-settings: var(--fraunces-h3); font-weight: 500; } .ff-cta { font-family: var(--ff-display); font-variation-settings: var(--fraunces-cta); font-weight: 500; } .ff-chapter { font-family: var(--ff-display); font-variation-settings: var(--fraunces-chapter); font-weight: 400; } .ff-body { font-family: var(--ff-body); font-variation-settings: var(--source-body); font-weight: 400; line-height: 1.65; } .ff-intro { font-family: var(--ff-body); font-variation-settings: var(--source-intro); font-weight: 400; line-height: 1.5; font-style: italic; } .ff-ui { font-family: var(--ff-ui); font-variation-settings: var(--inter-ui); font-weight: 500; letter-spacing: -0.005em; }