/* tokens.css
   Nessun colore, nessun font, nessun border-radius qui —
   quelli sono scelte estetiche e vivono in theme-default.css.

   Questi valori non cambiano tra temi diversi.
   Cambiano solo se si ridisegna il sistema di spaziatura o la scala
   tipografica (raro).

   Ordine di caricamento nell'HTML:
   1. reset.css
   2. tokens.css
   3. theme-default.css  ← sovrascrive o estende con colori e font
   4. components.css
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300..700;1,300..700&display=swap");

@font-face {
  font-family: "Excalifont";
  src: url("../assets/font/Excalifont-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {

  /* ─── Tipografia ───────────────────────────────────────
   */
  --font-family: "Inter", sans-serif;
  --font-hand: "Excalifont", sans-serif;

  /* ─── Spaziatura ──────────────────────────────────────────────
     Scala a passi di 4px. I nomi descrivono la dimensione relativa,
     non il valore assoluto — così funzionano anche se si cambia la
     base (es. passando a rem diverso).
  */
  --space-2:   0.125rem;  /*  2px */
  --space-4:   0.25rem;   /*  4px */
  --space-6:   0.375rem;  /*  6px */
  --space-8:   0.5rem;    /*  8px */
  --space-10:  0.625rem;  /* 10px */
  --space-12:  0.75rem;   /* 12px */
  --space-16:  1rem;      /* 16px */
  --space-20:  1.25rem;   /* 20px */
  --space-24:  1.5rem;    /* 24px */
  --space-28:  1.75rem;   /* 28px */
  --space-32:  2rem;      /* 32px */
  --space-40:  2.5rem;    /* 40px */
  --space-48:  3rem;      /* 48px */
  --space-64:  4rem;      /* 64px */
  --space-80:  5rem;      /* 80px */
  --space-96:  6rem;      /* 96px */





  /* ─── Scala tipografica ───────────────────────────────────────
     Basata su una scala modulare (rapporto ~1.25).
     font-size-base = 1rem = 16px (default browser).
  */
  --fs-12:   0.75rem;    /* 12px — label, caption */
  --fs-14:   0.875rem;   /* 14px — testo secondario */
  --fs-16:   1rem;       /* 16px — testo corpo (base) */
  --fs-18:   1.125rem;   /* 18px — testo enfatizzato */
  --fs-20:   1.25rem;    /* 20px — titoletti */
  --fs-22:   1.375rem;   /* 22px */
  --fs-24:   1.5rem;     /* 24px — titolo sezione */
  --fs-30:   1.875rem;   /* 30px — titolo pagina */
  --fs-36:   2.25rem;    /* 36px — hero */


  /* ─── Pesi tipografici ────────────────────────────────────────*/
  --fw-400:   400;
  --fw-500:   500;
  --fw-600:   600;
  --fw-700:   700;
  --fw-800:   800;


  /* ─── Altezze di riga ─────────────────────────────────────────
     Valori senza unità — si moltiplicano per il font-size locale.
  */
  --line-height-12: 1.2; /* titoli */
  --line-height-14: 1.4; /* sottotitoli, label */
  --line-height-16: 1.6; /* testo corpo */
  --line-height-18: 1.8; /* testo lungo, articoli */


  /* ─── Larghezza massima del testo ────────────────────────────
     Per la leggibilità ottimale: 60-75 caratteri per riga.
  */
  --paragraph-40:  40ch;
  --paragraph-65:  65ch;
  --paragraph-80:  80ch;


  /* ─── Dimensioni componenti ───────────────────────────────────
     Altezze standard degli elementi interattivi.
     Garantiscono touch target minimi (44px raccomandato da WCAG).
  */
  --height-input-32:  2rem;      /* 32px */
  --height-input-44:  2.75rem;   /* 44px — default */
  --height-input-52:  3.25rem;   /* 52px */


  /* ─── Bordi ───────────────────────────────────────────────────*/
  --border-width-1:  1px;
  --border-width-2:  2px;

  /* ─── Radius ───────────────────────────────────────────────────*/
  --radius-1:        1px;
  --radius-2:        2px;
  --radius-4:        4px;
  --radius-8:        8px;
  --radius-12:       12px;
  --radius-full:     9999px;

  /* ─── Z-index ─────────────────────────────────────────────────
     Scala esplicita per evitare guerre di z-index hardcoded.
  */
  --z-negative: -1; /* sotto tutto */
  --z-0:         0; /* base */
  --z-10:       10; /* elementi che sporgono leggermente */
  --z-100:     100; /* dropdown */
  --z-200:     200; /* header/fixed */
  --z-300:     300; /* modal, overlay */
  --z-400:     400; /* modale */
  --z-500:     500; /* toast/notification */


  /* ─── Transizioni ───────────────────────────────────────────────────*/
  --shadow-3px:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-12px:   0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-24px:   0 8px 24px rgba(0, 0, 0, 0.12);

  /* ─── Transizioni ───────────────────────────────────────────────────*/
  --transition-150:   150ms ease;
  --transition-250: 250ms ease;

  /* ── Palette  ──────────────────────────────────────
     Tinta blu-acciaio coerente su tutta la scala.
     I valori 400/600/650/700/850 non erano nel sorgente originale
     — aggiunti interpolando la curva lightness HSL.
  */
  --white:      #ffffff;
  --transparent: transparent;

  --grey-050: hsl(219 20% 99%);
  --grey-080: hsl(219 40% 98%);
  --grey-100: hsl(219 40% 96%);
  --grey-200: hsl(219 32% 91%);
  --grey-300: hsl(219 27% 84%);
  --grey-400: hsl(219 24% 76%);   /* interpolato */
  --grey-500: hsl(219 20% 65%);
  --grey-600: hsl(219 18% 57%);   /* interpolato */
  --grey-650: hsl(219 17% 52%);   /* interpolato */
  --grey-700: hsl(219 17% 42%);   /* interpolato */
  --grey-750: hsl(219 16% 47%);
  --grey-800: hsl(219 19% 35%);
  --grey-850: hsl(219 22% 31%);   /* interpolato */
  --grey-900: hsl(219, 25%, 27%);
  --grey-950: hsl(219 33% 17%);

  --blue-300: hsl(219 90% 94%);
  --blue-500: hsl(219 89% 44%);
  --blue-800: hsl(219, 39%, 24%);

  --red-600:    #c62828;
  --orange-500: #f97316;
  --yellow-200: #fff79c;
  --green-500:  #22c55e;


  /* ── Alpha ──────────────────────────────────────────────────────────── */
  --white-alpha-12: rgba(255, 255, 255, 0.12);  /* fix: era rgba(99,54,54,0.12) nel sorgente */
  --white-alpha-22: rgba(255, 255, 255, 0.22);
  --black-alpha-15: rgba(0, 0, 0, 0.15);
  --black-alpha-18: rgba(0, 0, 0, 0.18);
  --black-alpha-22: rgba(0, 0, 0, 0.22);
  --black-alpha-35: rgba(0, 0, 0, 0.35);

  
}