:root {
  /* Superfici — la terra (D1, D4) */
  /* Una tacca piu' calda, adottata dal mockup di riferimento (che sta a
     #f3ebde): e' il grosso della sensazione "vintage", e non e' un colore
     nuovo — e' lo stesso fondo con meno blu. Contrasti rimisurati: testo
     15,14:1, testo muto 5,50:1, lavanda 5,21:1. Nessuno scende. */
  /* B13 - il crema raffreddato. La voce in inventario diceva "raffreddare di
     ~10 sul blu", ed era impreciso: misurando il CALORE (rosso meno blu) la
     differenza col mockup e' quasi tutta nel fondo pagina, non nella fascia.
       fondo pagina: nostro 16 -> mockup 8   (dimezzato)
       fascia:       nostra 23 -> mockup 20  (quasi uguale)
     Lo stacco fra card e pagina resta 11,7, identico a prima e identico al
     mockup: si raffredda la coppia, non si allontana.
     Tutti i contrasti salgono di poco, nessuno scende: il testo attenuato
     sulla card passa da 4,95 a 5,10 e la lavanda dei bordi da 3,20 a 3,29. */
  --color-surface: #f8f4f0;
  --color-surface-alt: #f0e8dc;
  /* Il bianco resta a cio' che sta SOPRA la pagina o che ne e' arredo:
     i cassetti, la barra dei cookie, i controlli di form, la carta dietro
     una foto ritagliata. Non e' il fondo di una card di contenuto. */
  --color-surface-card: #ffffff;

  /* La card prende l'ALTRA superficie rispetto alla fascia che la ospita.
     Misurato sul mockup, e su due coppie indipendenti:
       fascia #f8f4f0 chiara -> card #f0e8dc beige   (sezione "Il libro")
       fascia #f0e8dc beige  -> card #f4f4f0 chiara  (testimonial)
     Non e' "le card diventano beige": e' un'inversione. Il valore qui e' la
     preimpostazione per una card su fondo chiaro; le fasce gia' beige lo
     ribaltano da se' (vedi shell.css).
     Lo scarto di luminanza che ne esce e' 11 punti, lo stesso del mockup. */
  --color-card: var(--color-surface-alt);

  /* Anche la carta dietro una foto ritagliata dentro una card usa
     --color-card, non un valore fisso: dentro una fascia beige la card
     diventa chiara, e un fondo immagine rimasto beige ci resterebbe dentro
     come un rettangolo di un altro colore. Misurato: card rgb(246,241,230)
     contro zona immagine rgb(237,229,214). Seguendo la card, sparisce. */

  /* Scuro — punteggiatura, non più terra (D3, D6) */
  --color-primary: #2d3047;
  --color-primary-light: #4a4e6a;

  /* Inchiostro */
  --color-text: #1a1a2e;
  --color-text-muted: #5b6170;
  --color-white: #ffffff; /* invariato — testo chiaro su superfici scure non tematiche (es. banner spedizione) */

  /* Accenti — D2: la lavanda naviga, la pesca compra */
  --color-accent: #e8985e;      /* pesca — SOLO background, mai colore di testo (A6) */
  --color-link: #6b5a9e;        /* lavanda testo — link e stati interattivi */
  --color-lav: #8e7dbe;         /* lavanda del marchio — solo non-testo: bordi, focus, icone, testo >=24px */
  --color-lav-on-dark: #b0a2d6; /* lavanda sulla banda scura (footer) */

  /* Stato */
  --color-green: #0f6e56;
  --color-error: #c0392b;
  --color-warn: #8f5214;

  /* Bordi */
  --color-border: #f0ede8;
  --color-border-strong: #e4dfd7; /* dove serve un confine più deciso */

  /* Un filetto sulla BANDA SCURA non puo' usare --color-border: #f0ede8 e'
     un colore da fondo chiaro e sul footer diventa una riga quasi bianca.
     Misurato sul mockup: la riga sopra il copyright sta a 89 di luminanza
     contro un fondo di 52, cioe' bianco a circa il 19%. */
  --color-border-on-dark: rgba(255, 255, 255, 0.18);
  /* Bordo dei campi di modulo: --color-border e' identico al loro riempimento
     (#f0ede8 su #f0ede8 = 1,00:1) e nessuna delle due superfici raggiunge i 3:1
     che la WCAG 1.4.11 chiede al confine di un controllo. La lavanda del marchio
     da' 3,09:1 sul campo e 3,40:1 sulla pagina. Reperto R1 del GO 005. */
  /* La stella VUOTA. Prima era --color-border-strong (#e4dfd7): su una card
     bianca staccava di 31 punti di luminanza, ma da quando la card e' beige
     (#ede5d6) ne staccava 6 e spariva. Non e' un capriccio: quante stelle
     sono piene e quante vuote e' un DATO, e se le vuote non si vedono il
     dato non si legge. #cfc7b8 rimette esattamente 30 punti, cioe' lo stacco
     che il disegno aveva prima di B1. */
  --color-star-empty: #cfc7b8;

  --color-field-border: #8e7dbe;

  /* Ombre — tinta d'inchiostro, mai nera (D4) */
  --card-shadow: 0 1px 2px rgba(45, 48, 71, 0.05);
  --card-shadow-hover: 0 25px 50px -12px rgba(45, 48, 71, 0.25), 0 8px 20px -6px rgba(45, 48, 71, 0.15), 0 2px 4px -1px rgba(45, 48, 71, 0.10);

  /* Typography (D5) */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing — invariato, fuori scope */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Layout */
  --container-max: 1200px;
  /* ATTENZIONE: questo valore NON ha effetto su nessuna pagina. `shell.css` porta
     `--header-height: 88px` sullo stesso `:root`, si carica dopo di noi e quindi
     vince ovunque; l'header che il browser rende e' alto 88px, non 144.
     Storia, perche' senza non si capisce: il 24-08 alle 12:32 il raddoppio entra
     qui (era 72px, che D8 aveva portato da 120); alle 14:22 arriva il guscio e
     se lo riprende, senza che nessuno se ne accorga per due giorni.
     Lasciato in vita solo per non perdere la traccia della richiesta: se l'header
     deve tornare a 144, si cambia SHELL.CSS, non questa riga. */
  --header-height: 144px;

  /* Transitions — invariato */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px; /* nuovo — i bottoni sul vivo sono pillole (D4) */
}