/* =========================================================================
   Serenlibrità — Design Token (D-21)
   =========================================================================
   Token del sistema "carta & inchiostro" estratti dal design canonico
   (docs/design/serenlibrita/). Esposti come custom property in :root così che
   ogni foglio/feature successivo li riusi senza ridefinire colori a mano.
   Questo file (commentato) è anche parte del deliverable d'esame "HTML/CSS
   commentato". I valori hex sono quelli di CONTEXT § Canonical References.
   ========================================================================= */

:root {
  /* --- Palette: colore -------------------------------------------------- */
  /* Primario: terracotta romana — CTA, accenti, brand mark. */
  --color-primary: #B8502F;
  /* Secondario: verde bottiglia — pannelli scuri, nav, badge consenso. */
  --color-secondary: #2C4A3B;
  /* Carta crema: superficie/sfondo principale (mood "carta"). */
  --color-paper: #F4EBDA;
  /* Carta chiara: superfici sollevate (card, input). */
  --color-paper-light: #FCF8EF;
  /* Inchiostro: testo principale ad alto contrasto. */
  --color-ink: #211B13;
  /* Testo caldo: testo secondario/label su carta. */
  --color-text-warm: #4A3F30;
  /* Ocra/oro: enfasi corsiva, micro-accenti. */
  --color-ocra: #D49B3C;
  /* Righe/bordi: separatori, bordo input, hairline. */
  --color-border: #E0D2B8;

  /* --- Tipografia ------------------------------------------------------- */
  /* Serif letterario (con corsivo) per i titoli (D-23, vendorizzato). */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* Alias storico: alcune classi (consent title, avatar initials) referenziavano
     `var(--font-display)` mai definito → cadevano sul serif di sistema invece di
     Newsreader. Aliasato al serif del progetto (08-fidelity G8 profilo). */
  --font-display: var(--font-serif);
  /* Sans per UI e testo corrente (D-23, vendorizzato). */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  /* Scala tipografica (normalizzata dal design: h1 fluido, base 16px). */
  --font-size-base: 16px;
  --font-size-sm: 13px;
  /* Phase 8: la scala collassa da 5 a 4 size — il vecchio token "lg" (21px) è
     rimosso; i (pochi) consumatori rimappano a `--font-size-h2`/`--font-size-base`. */
  --font-size-h2: 24px;
  --font-size-h1: clamp(2rem, 5vw, 3.25rem);
  --line-height-base: 1.6;
  --line-height-tight: 1.05;

  /* --- Spaziatura (scala 4px) ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* --- Raggi & ombre (dal prototipo: bordi morbidi ~11px) -------------- */
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --shadow-cta: 0 8px 20px rgba(184, 80, 47, 0.28);
  --shadow-card: 0 12px 34px rgba(33, 27, 19, 0.10);

  /* --- Breakpoint mobile-first (D-26: 860px, dal design) --------------- */
  --bp-tablet: 860px;

  /* --- Aggiunte Phase 8: app-shell + status + brand-mark ---------------- */
  /* Sfondo della sidebar desktop (D-26, app-shell Phase 8). */
  --color-sidebar: #EFE4CE;
  /* Evidenziazione dell'item di nav attivo (sidebar + mini-profilo). */
  --color-nav-active: #E4D8BF;
  /* Testo attenuato: secondario/meta, label di nav inattive.
     A11Y-01 gate (Plan 08-10): il vecchio #7A6B53 passava su paper-light (4.89:1) ma
     FALLIVA su paper #F4EBDA (4.37), sidebar #EFE4CE (4.11) e — il caso critico — su
     --color-nav-active #E4D8BF (3.67), proprio dove rendono le label di nav inattive,
     più la barra mobile traslucida. Scurito a #6B5C45: ogni coppia muted-su-superficie
     è ora ≥4.5:1 (paper-light 6.11, paper 5.47, sidebar 5.14, nav-active 4.59,
     panel-info 5.83). #72624A non bastava (nav-active 4.18). */
  --color-text-muted: #6B5C45;
  /* Icone attenuate: icone di nav/meta inattive (decorative, aria-hidden). */
  --color-icon-muted: #9A8B6F;
  /* Enfasi chiara su superfici scure (pannello editoriale auth). */
  --color-ocra-light: #E8A24A;
  /* Banner informativi privacy-by-design (info consenso/geo): sfondo + bordo. */
  --color-panel-info: #F1F4ED;
  --color-panel-info-border: #D7E0D2;
  /* Badge di stato — Disponibile (tinta verde): sfondo + testo. */
  --color-status-avail-bg: #E7EFE3;
  --color-status-avail-fg: #2C4A3B;
  /* Badge di stato — In prestito (tinta terra): sfondo + testo. */
  --color-status-lent-bg: #F3E6DC;
  --color-status-lent-fg: #9A4A28;
  /* Badge di stato — In attesa / pending (tinta sabbia neutra): sfondo + testo.
     Rimpiazza l'``--color-muted`` MAI definito (G-10) usato dalle vecchie inbox. */
  --color-status-attesa-bg: #EFE7D6;
  --color-status-attesa-fg: #6E5A33;
  /* Track dello switch consenso in stato "off". */
  --color-toggle-off: #CBB799;
  /* Tela della mappa Leaflet: tono "carta" fra paper e border (08-fidelity mappa G-01). */
  --color-map-canvas: #E8DCC4;
  /* Brand-mark navy: logo SVG + theme-color del chrome SOLO (non per testo/nav). */
  --color-brand-ink: #1b2d49;
  /* Brand-mark oro: dorso del logo + eco nel pannello auth SOLO. */
  --color-brand-gold: #b58a45;

  /* --- Palette categorie (--cat-*): bar chart + chip + pin mappa -------- */
  /* Un colore per categoria, riusato da grafici, chip e marker (coerenza). */
  --cat-narrativa:   #B8502F;
  --cat-saggistica:  #2C4A3B;
  --cat-fumetto:     #245C5C;
  --cat-ragazzi:     #D49B3C;
  --cat-poesia:      #6E2A2A;
  --cat-gialli:      #2B3A55;
  --cat-filosofia:   #4A2F45;
  --cat-arte:        #C98A2B;

  /* --- Alias semantici v2.3 (additivi — primitive sopra invariate) --- */
  /* Tier semantico v2.3: nomi di ruolo che PUNTANO ai --color-* primitivi qui
     sopra (byte-identici). Additivo — nessun primitivo rinominato/rinumerato;
     vecchi e nuovi nomi risolvono identici. Definiti-ma-non-consumati in questa
     fase (nessuna regola di base.css li legge ancora) → zero cambiamento visivo. */
  --bg:               var(--color-paper);        /* #F4EBDA */
  --surface:          var(--color-paper-light);  /* #FCF8EF */
  /* Open Q1 risolta (a): alias a paper-light (nessun 3° tono carta); un tono
     "raised" reale è rimandato a una fase successiva (Phase 32). */
  --surface-raised:   var(--color-paper-light);  /* = --surface finché non serve un tono elevato */
  --text:             var(--color-ink);          /* #211B13 */
  --text-muted:       var(--color-text-muted);   /* #6B5C45 */
  --primary:          var(--color-primary);      /* #B8502F terracotta */
  /* COMPUTED 4.97:1 AA su terracotta per TOK-03 (il crema #F4EBDA era 4.20 sub-AA). */
  --primary-contrast: #ffffff;
  --strong:           var(--color-secondary);    /* #2C4A3B verde bottiglia */
  --accent:           var(--color-ocra);         /* #D49B3C ambra/oro */
  /* navy #1b2d49, LOCKED — NON il teal di categoria, per TOK-03 (L103). */
  --brand:            var(--color-brand-ink);
  --border:           var(--color-border);       /* #E0D2B8 */

  /* --- Scalari v2.3 (transizione, container, focus, ombra, type) --- */
  /* Scalari mancanti estratti (misurati) dai literali ripetuti in base.css.
     Definiti-ma-non-consumati in questa fase → zero cambiamento visivo;
     i literali verranno rimpiazzati da var(...) in Phase 32+. */
  --t:             0.15s ease;                       /* timing canonico, hardcoded ~10× in base.css */
  /* Open Q3 risolta: 1080px = layout più largo misurato (.sl-how/.sl-featured).
     NB: .sl-main ≈ 720px e .sl-profile ≈ 920px sono colonne di contenuto più
     strette → una fase PAGE successiva decide per-pagina; NON auto-applicato qui. */
  --container-max: 1080px;
  --container-pad: var(--space-5);                   /* 24px, = padding orizzontale di .sl-main */
  --focus-ring:    2px solid var(--color-secondary); /* pattern canonico ripetuto ~10× */
  --shadow-sm:     0 6px 14px rgba(33, 27, 19, 0.20); /* ombra piccola neutra più ripetuta */
  --fs-kicker:     12px;                              /* = dimensione di .sl-eyebrow */
  --fs-h3:         19px;                              /* cluster titoli-card, fra h2 24px e base 16px */

  /* --- Testate di pagina (fase 59, 05-10-2026) -------------------------------
     Verde, terracotta, crema e testo si RIUSANO (--color-secondary, --color-primary,
     --color-paper-light, --color-ink, --color-text-warm). Nuovi solo i colori che il
     sito non aveva: quelli del logo (static/img/serenlibrita-mark.svg) e l'oro della
     mensola. Contrasti misurati: oro su verde 4,82:1; #d5ddcf su verde 7,0:1;
     terracotta su crema 4,65:1 (solo titoli grandi). Il teal del logo su crema fa
     2,87:1: MAI per testo, solo per il pin. */
  --color-logo-ink:       #16263f;   /* inchiostro del wordmark: solo dorsi */
  --color-logo-teal:      #12a594;   /* pin del logo */
  --color-logo-cream:     #fbf7ee;   /* libro dentro il pin, icone a tratto */
  --color-shelf-gold:     #dcaf64;   /* mensola, parola in evidenza su verde */
  --color-shelf-gold-dark:#b8924f;   /* ombra sotto la mensola */
  --color-contour:        #3e6451;   /* curve di livello sulla fascia */
  --color-on-green-muted: #d5ddcf;   /* sottotitolo sulla fascia */
  /* 36px su telefono -> 56px su desktop (oggi --font-size-h1 fa 32 -> 52) */
  --fs-page-title: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  /* nomi esterni (punti): una taglia sotto, un nome di biblioteca è lungo */
  --fs-page-title-plain: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem);
  /* 28px -> 40px */
  --fs-section-title: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}