/* ==========================================================================
   SAIMON — Token
   Traduzione fedele del design system (design.md v0.1).
   Nessun valore fuori da questo file: se serve un colore nuovo, si aggiunge qui.
   ========================================================================== */

:root {
  /* ---------- Panna (dominante) ---------- */
  --colore-panna-50:  #FFFDF9;
  --colore-panna-100: #FAF6EF;
  --colore-panna-200: #F3EDE2;
  --colore-panna-300: #E8E0D2;

  /* ---------- Salvia (identitario) ---------- */
  --colore-salvia-100: #EAF0E5;
  --colore-salvia-200: #D8E2CF;
  --colore-salvia-300: #BFCFB4;
  --colore-salvia-500: #8FA681;
  --colore-salvia-700: #5E7351;
  --colore-salvia-800: #4C5D41;
  --colore-salvia-900: #3C4A34;

  /* ---------- Legno chiaro (materico) ---------- */
  --colore-legno-100: #F0E4D4;
  --colore-legno-300: #DFC7A8;
  --colore-legno-500: #C9A87C;
  --colore-legno-700: #7E6039;
  --colore-legno-900: #3B2E20;  /* noce scuro — fondo della sezione matrimoni */

  /* ---------- Antracite (funzionale) ---------- */
  --colore-antracite-900: #29282D;
  --colore-antracite-700: #3D3C43;
  --colore-antracite-500: #5C5A63;
  --colore-antracite-300: #8E8C95;

  --colore-bianco: #FFFFFF;

  /* ---------- Semantici: superfici ---------- */
  --sfondo-pagina:        var(--colore-panna-100);
  --sfondo-elevato:       var(--colore-panna-50);
  --sfondo-sezione-alt:   var(--colore-panna-200);
  --sfondo-sezione-verde: var(--colore-salvia-100);
  --sfondo-invito:        var(--colore-salvia-300);  /* Pantone 16-1124, il salvia firma */
  --sfondo-sezione-calda: var(--colore-legno-100);
  --sfondo-sezione-scura: var(--colore-antracite-900);
  --sfondo-sezione-legno: var(--colore-legno-900);
  --sfondo-lettore:       #000000;  /* il video a schermo intero: le bande devono sparire */

  /* ---------- Semantici: testo ---------- */
  --testo-principale: var(--colore-antracite-900);
  --testo-secondario: var(--colore-antracite-700);
  --testo-tenue:      var(--colore-antracite-500);
  --testo-su-scuro:   var(--colore-panna-100);
  --testo-accento:    var(--colore-salvia-800);
  --testo-caldo:      var(--colore-legno-700);

  /* ---------- Semantici: interazione ---------- */
  --azione-primaria:         var(--colore-salvia-700);
  --azione-primaria-hover:   var(--colore-salvia-800);
  --azione-primaria-testo:   var(--colore-bianco);
  --azione-secondaria-bordo: var(--colore-antracite-900);
  --focus-anello:            var(--colore-salvia-800);
  --focus-anello-scuro:      var(--colore-panna-100);
  --errore:                  #8A2F2F;  /* lo stesso rosso degli errori del modulo prenotazioni */

  /* ---------- Semantici: strutture ---------- */
  --bordo-tenue:      var(--colore-panna-300);
  --bordo-decorativo: var(--colore-legno-300);
  --bordo-marcato:    var(--colore-antracite-900);

  /* ---------- Tipografia ---------- */
  --font-principale: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --testo-xs:   0.75rem;
  --testo-sm:   0.875rem;
  --testo-base: 1rem;
  --testo-md:   1.125rem;
  --testo-lg:   1.5rem;
  --testo-xl:   1.875rem;
  --testo-2xl:  2.5rem;
  --testo-3xl:  3.25rem;
  --testo-4xl:  4.5rem;

  /* ---------- Spaziature (base 4px) ---------- */
  --spazio-1:  0.25rem;
  --spazio-2:  0.5rem;
  --spazio-3:  0.75rem;
  --spazio-4:  1rem;
  --spazio-6:  1.5rem;
  --spazio-8:  2rem;
  --spazio-12: 3rem;
  --spazio-16: 4rem;
  --spazio-24: 6rem;
  --spazio-32: 8rem;
  --spazio-40: 10rem;

  /* ---------- Contenitori ---------- */
  --contenitore-stretto: 42rem;
  --contenitore-base:    68rem;
  --contenitore-largo:   84rem;
  --contenitore-esteso:  100rem;  /* 1600px — sezioni a tutto schermo su monitor larghi */
  --contenitore-testata: 112rem;  /* 1792px — la barra di navigazione */
  --margine-laterale:    var(--spazio-6);
  --margine-laterale-lg: var(--spazio-12);

  /* ---------- Raggi, bordi, ombre ---------- */
  --raggio-sm: 4px;
  --raggio-md: 8px;
  --raggio-lg: 16px;
  --raggio-tondo: 999px;

  --bordo-sottile: 1px solid var(--bordo-tenue);
  --bordo-accento: 1px solid var(--bordo-decorativo);

  --ombra-sm: 0 1px 2px rgba(41, 40, 45, 0.04);
  --ombra-md: 0 4px 16px rgba(41, 40, 45, 0.06);
  --ombra-lg: 0 12px 40px rgba(41, 40, 45, 0.08);

  /* ---------- Movimento ----------
     Curve esponenziali in uscita: entrano decise e si posano. Mai rimbalzi. */
  --uscita:       cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quart */
  --uscita-lenta: cubic-bezier(0.16, 1, 0.30, 1);   /* ease-out-expo  */
  --durata-breve: 180ms;
  --durata-media: 320ms;
  --durata-lunga: 640ms;

  /* ---------- Piani di sovrapposizione ---------- */
  --piano-sfondo:    0;
  --piano-contenuto: 1;
  --piano-barra:     20;   /* barra dei tre mondi */
  --piano-fisso:     30;   /* testata, torna su */
  --piano-avviso:    35;   /* scheda dell'avviso in evidenza */
  --piano-tendina:   40;   /* sottomenu */
  --piano-velo:      50;   /* velo del menu mobile */
  --piano-pannello:  60;   /* menu mobile aperto */
  --piano-morph:     62;   /* il marchio che si fonde: sopra a tutto, ma non clicca */
}