/* Token del verticale property_clearance (sgomberi e svuoto locali).
   I valori sono la sola fonte: theme.json li LEGGE da qui (fontSizes, spacingSizes, famiglie font).

   Palette: ruoli presi dal template di categoria, valori dal marchio del cliente — l'arancione è
   MISURATO sui pixel del logo (#F06018), non dedotto dal CSS del vecchio sito (#d56d31, che non regge
   testo scuro: 4.41). Le 25 coppie realmente usate stanno tutte >= 4.6.
   ⛔ Il bianco NON va sull'arancione pieno (3.29): sull'accento si scrive con --ink (5.25). È il modello
   del template (accento vivo + testo scuro) ed è ciò che il sito attuale del cliente sbaglia (3.46). */
:root {
  /* famiglia scura di marca: testata, bande piene, glifi del display */
  --brand-dark: #2B160B;
  --brand:      #3A1E10;
  --brand-mid:  #5A2E15;

  /* famiglia calda intermedia */
  --sage:       #8A5A3A;
  --sage-light: #FFC48A;
  --sage-tint:  #F5E7DA;

  /* Accento SDOPPIATO: --accent è SUPERFICIE, --accent-ink è la stessa famiglia usata come TESTO su
     chiaro. Un colore di marca a media luminanza non può fare entrambe le cose. */
  --accent-ink:  #9C5024;
  --accent:      #F06018;
  --accent-dark: #B84A11;

  --paper:   #FFFFFF;
  --surface: #FBF7F3;
  --ink:       #1F1A16;
  --ink-muted: #5C5049;
  --line:      #E3D6CA;
  --on-dark:       #FFFFFF;
  --on-dark-muted: #E8D5C6;
  --focus: #9C5024;

  /* alias di pagina: il body li consuma, le bande scure li RIDICHIARANO su di sé */
  --bg: var(--paper);
  --fg: var(--ink);

  --scrim: rgba(43, 22, 11, 0.58);

  /* Un solo sans per display, UI e corpo; il graziato SOLO in corsivo, per l'occhiello.
     ⚠ Il display sta in peso 400 anche a corpo grande: è la scelta della categoria, irrobustirlo la perde. */
  --font-body:   "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;

  --text-sm:   0.86rem;
  --text-base: 1.0625rem;
  --text-md:   1.18rem;
  --text-lg:   1.45rem;
  --text-xl:   clamp(1.75rem, 1.3rem + 1.4vw, 2.35rem);
  --text-2xl:  clamp(2rem, 1.4rem + 2.1vw, 3rem);
  --text-3xl:  clamp(2.3rem, 1.5rem + 2.6vw, 3.9rem);

  /* ⚠ Interlinea del corpo a 1.6, non 1.2 come il template: le pagine di questi clienti sono prose
     lunghe (le landing locali passano le 400 parole) e a 1.2 non si leggono. È il quarto in cui il
     riferimento va MIGLIORATO. */
  --lh-body: 1.6;
  --lh-snug: 1.18;
  --lh-tight: 1.08;
  --tracking-display: -0.03em;
  --tracking-label: 0.01em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --field-radius: 9px;
  --border: 1px solid var(--line);
  --section-y: clamp(3.5rem, 2rem + 4vw, 6rem);

  /* ⚠ Il compenso full-bleed è un TOKEN, non un calcolo al volo: `calc(50% - 50vw)` risolve il 50%
     sulla cella di griglia e non sul contenitore. Ogni grandezza che dipende da 100vw va provata ai DUE
     estremi, e le max-width la SOMMANO invece di subirla. */
  --bleed: max(var(--gutter), calc((100vw - var(--container)) / 2));

  --shadow-sm: 0 2px 10px rgba(43, 22, 11, 0.07);
  --shadow-md: 0 18px 50px rgba(43, 22, 11, 0.28);

  --tile-ratio: 3 / 2;
  --usato-ratio: 3 / 4;

  /* Gradienti: velature LARGHE e a basso contrasto, mai bande visibili. Servono a togliere alle
     campiture piene l'aria di fondale — è ciò che distingue una banda moderna da un rettangolo di colore.
     ⚠ Nessuno di questi porta testo da solo: il contrasto resta quello del colore di base. */
  --grad-brand: radial-gradient(120% 90% at 12% 0%, #4A2716 0%, var(--brand) 55%, #2E170C 100%);
  --grad-deep: radial-gradient(110% 100% at 88% 0%, #6B3A1C 0%, var(--brand-mid) 60%, #401F0E 100%);
  --grad-carta: linear-gradient(180deg, var(--paper) 0%, var(--surface) 100%);
  --grad-tint: linear-gradient(160deg, var(--sage-tint) 0%, #FBEFE3 100%);
  --grad-accento: linear-gradient(100deg, var(--accent) 0%, #FF7A33 100%);
  --grad-velo: linear-gradient(180deg, rgba(43,22,11,0) 55%, rgba(43,22,11,.34) 100%);

  --dur: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}