/* tokens.css — design genome event_rental. Noleggio/allestimenti per eventi e feste: registro
   editoriale-minimale (riferimento Bounce Party LA), gioioso ma curato. Base CREMA ariosa; l'AQUA/teal del
   brand è l'accento (link, CTA, filetti, parole in corsivo); il CORALLO è il pop caldo (usato con parsimonia).
   Il carattere lo danno lo spazio bianco, i blocchi pieni e le tessere foto: il materiale tipico è a ~850px e
   non regge un hero fotografico a piena larghezza. Vocabolario CHIUSO: i nomi dei ruoli colore coincidono 1:1
   con palette_roles dell'IR. Contrasti WCAG AA verificati dal pixel su ogni coppia di testo (margine >=4.8):
   ink 15.4 su carta, brand 5.57, ink-muted 6.4, white su brand 5.95, ink su corallo 5.05, on-dark-muted 5.28
   su teal. Vincoli d'uso: pannello corallo -> SOLO testo ink (bianco su corallo 3.27 KO); on-dark-muted su
   teal = #E6F4F5 (il #BFE3E6 fa 4.35 KO). Niente valori fuori da qui. */
:root {
  /* --- Colore (base pulita fredda + aqua/teal brand VIVO + pop corallo acceso). Palette rivista per piu'
     impatto (owner: "meno spento, meno vecchio"): stessa tonalita' aqua/teal, piu' viva; base non piu' crema
     calda ma bianco-aqua freddo. Contrasti AA verificati su ogni coppia testo/fondo (scratchpad/palette.mjs). --- */
  --brand-dark: #083F49;  /* teal profondo: fasce scure, hover, inizio gradienti */
  --brand:      #0C6E7A;  /* teal brand: link, CTA, testo-accento (bianco 5.95:1, su carta 5.64:1) */
  --brand-mid:  #12A7B8;  /* AQUA brillante: filetti/decori/pop non-testo, fine gradienti */
  --sage:       #3FA9B8;  /* aqua: filetti/decori non-testo su chiaro */
  --sage-light: #86DDE6;  /* aqua chiaro brillante */
  --sage-tint:  #D1EFF3;  /* tint aqua: bande/chip/superfici */
  --accent-ink: #BE4632;  /* corallo TESTO su chiaro (4.83:1) / con bianco (5.11:1) */
  --accent:     #FB6A45;  /* corallo pop ACCESO: bottoni (testo ink 5.72:1), dettagli */
  --accent-dark:#FFB199;  /* corallo chiaro: dettaglio su fondo teal (decor, non testo AA) */

  --paper:   #F3FAFB;  /* fondo pagina (bianco-aqua freddo, fresco) */
  --surface: #FFFFFF;  /* card */
  --ink:     #13202A;  /* testo principale (15.7:1 su carta) */
  --ink-muted:#4C5862; /* testo secondario su chiaro (6.9:1 su carta) */
  --line:    #D2E5E8;  /* bordi/divisori freddi (non-testo) */
  --on-dark: #FFFFFF;  /* testo su superfici teal */
  --on-dark-muted:#DDF3F6; /* testo secondario su teal (5.17:1) */
  --focus:   #0C6E7A;  /* anello di focus (teal ad alta visibilità) */

  /* --- Extra di design (non ruoli IR): banda alternata (tint aqua freddo) --- */
  --sand:    #E3F3F5;  /* sezioni "alt" (banda aqua tenue) */

  --bg: var(--paper);
  --fg: var(--ink);

  /* --- Tipografia: Bricolage Grotesque (display grottesco contemporaneo, caldo e caratteriale) + Inter
     (testo), OFL self-hosted. tokensOf() legge --font-display e --font-body (lancia se un token manca). --- */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-xs:  0.8125rem;  /* 13px */
  --text-sm:  0.9375rem;  /* 15px */
  --text-base: 1.0625rem; /* 17px corpo */
  --text-md:  1.1875rem;  /* 19px lead */
  --text-lg:  1.375rem;   /* 22px H3 */
  --text-xl:  clamp(1.55rem, 1.2rem + 1.3vw, 2rem);
  --text-2xl: clamp(1.95rem, 1.4rem + 2.4vw, 2.85rem);  /* display sezione */
  --text-3xl: clamp(2.4rem, 1.6rem + 3.5vw, 4.4rem);    /* display hero (foto-forward, cap proporzionato) */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.62;
  --tracking-label: 0.16em; /* eyebrow uppercase */

  /* --- Spaziatura (ritmo editoriale arioso) --- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
  --space-9: 6rem; --space-10: 8rem;
  --section-y: clamp(3.2rem, 2rem + 4.5vw, 6rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 740px;
  --gutter: clamp(1.1rem, 0.5rem + 3vw, 2rem);

  /* --- Forma (BPLA: card morbide, pill) --- */
  --radius: 8px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* --- Ombre (calde, morbide) --- */
  --shadow-sm: 0 6px 20px -12px rgba(22,32,42,.30), 0 1px 2px rgba(22,32,42,.05);
  --shadow-md: 0 18px 40px -22px rgba(22,32,42,.28), 0 2px 8px rgba(22,32,42,.06);

  /* --- Griglia foto: il gutter è OBBLIGATORIO (le tessere non si toccano mai) --- */
  --tile-gap: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);

  /* --- Motion (sobria) --- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}