/* ==========================================================================
   NOTTE CELESTE 2026 — Design token
   Fonte: palette.txt (fa fede) + volantino · Font: Poppins (licenza SIL OFL,
   inclusa nello zip cliente → uso web consentito, rischio licenza chiuso)
   Contrasti calcolati con formula WCAG 2.1 (soglie: 4.5:1 testo, 3:1 large/UI)

   Copia sincronizzata da 03-output/design-system/tokens.css.
   NON modificare i valori qui: la palette e i contrasti sono verificati e
   chiusi (vedi CLAUDE.md). Eventuali correzioni vanno fatte a monte.
   ==========================================================================

   ⚠️ REGOLE NON NEGOZIABILI
   1. Su --color-accent (#41a7de) si va di navy (#16253f), MAI di bianco.
      Vale per TESTO, ICONE e FOCUS RING. Bianco su accent = 2.69:1 →
      sotto il 4.5:1 del testo e sotto il 3:1 di WCAG 1.4.11 (non-text).
      Usare --color-text-on-accent e --color-focus-on-accent.
   2. COLLISIONE primary/surface: --color-primary (#1275bb) su
      --color-surface (#0756a3) = 1.49:1. VIETATO: bottoni, tab o badge
      primary dentro una card surface. Dentro una card surface la CTA è
      --color-cta-bg (bianco, 7.32:1).

   BREAKPOINT (le custom property non funzionano nelle media query:
   questi valori sono normativi, copiarli a mano)
   - 320px  → minimo supportato, il layout non si rompe sotto
   - 768px  → tablet: timeline programma a 2 colonne, header esteso
   - 1024px → desktop: container max, griglia aree/sponsor piena
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face — Poppins self-hosted, solo i 3 pesi usati, WOFF2
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ------------------------------------------------------------------------
     COLORI — ruoli semantici. Palette volantino, nessun colore inventato.
     ------------------------------------------------------------------------ */

  /* Fondo pagina. Con --color-text: 15.32:1 (AAA).
     Ammette testo bianco di qualsiasi dimensione e testo accent (5.70:1, AA). */
  --color-bg: #16253f;

  /* Superfici rialzate: card programma, card aree, blocco "Oggi in piazza".
     Con testo bianco: 7.32:1 (AA anche testo piccolo).
     ⚠️ MAI testo accent su surface: 2.72:1, fallisce. */
  --color-surface: #0756a3;

  /* Colore di marca: bottoni secondari, tab attivi, bordi enfatici.
     Con testo bianco: 4.90:1 (AA testo normale).
     Su --color-bg come elemento grafico/testo ≥24px: 3.13:1 (solo soglia 3:1,
     MAI body text primary su bg). ⚠️ Vedi regola 2: mai su surface. */
  --color-primary: #1275bb;

  /* Bordo card. surface su bg = 2.09:1: senza bordo esplicito la card non si
     stacca dal fondo → ogni card su --color-bg richiede bordo.
     ⚠️ Valido SOLO su --color-bg: 3.13:1, supera il 3:1 non-text (WCAG 1.4.11).
     Su surface 1.49:1, su primary 1.00:1 (è lo stesso colore) → invisibile.
     Per i confini tra bande adiacenti usare --color-separator. */
  --color-border: #1275bb;

  /* Separatore tra superfici piene: 4.43:1 su surface, 3.23:1 su primary —
     confini tra bande adiacenti (le-serate). Sopra il 3:1 non-text ovunque. */
  --color-separator: rgba(255, 255, 255, 0.7);

  /* Il celeste del nome: highlight, numeri giorno, icone, linee timeline.
     Come TESTO è ammesso solo su --color-bg: 5.70:1 (AA).
     Come SFONDO ammette solo testo navy: vedi regola 1 in testa al file. */
  --color-accent: #41a7de;

  /* Testo base. Ammesso su bg (15.32:1), surface (7.32:1), primary (4.90:1).
     MAI su accent (2.69:1). */
  --color-text: #ffffff;

  /* Testo secondario: didascalie, note, orari già passati. 8.20:1 su bg (AAA).
     SOLO su --color-bg: su surface fa 3.92:1, sotto AA. */
  --color-text-muted: #b9bec5;

  /* Unico testo ammesso sopra --color-accent: 5.70:1 (AA). */
  --color-text-on-accent: #16253f;

  /* Sfondo CTA primaria: bianco pieno, massimo stacco sul fondo notturno. */
  --color-cta-bg: #ffffff;

  /* Testo CTA primaria su fondo bianco: 15.32:1 (AAA). */
  --color-cta-text: #16253f;

  /* Focus ring standard: bianco. 15.32:1 su bg, 7.32:1 su surface,
     4.90:1 su primary — sempre sopra il 3:1 di WCAG 1.4.11. */
  --color-focus: #ffffff;

  /* Focus ring su elementi accent: bianco su accent = 2.69:1, sotto il 3:1
     di WCAG 1.4.11 → anche il ring diventa navy (5.70:1). Vedi regola 1. */
  --color-focus-on-accent: #16253f;

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ------------------------------------------------------------------------
     TIPOGRAFIA — Poppins, 3 pesi. Fallback di sistema per il FOUT (swap).
     ------------------------------------------------------------------------ */

  --font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --weight-display: 800; /* ExtraBold: numeri giorno, H1 */
  --weight-heading: 600; /* SemiBold: H2/H3 */
  --weight-body: 400;    /* Regular: testo corrente */

  /* Type scale modulare — base 16px, rapporto 1.25 (quarta maggiore).
     Il body non scende MAI sotto --text-base: nessun token < 1rem.
     Da --text-2xl in su la scala è fluida (clamp lineare tra viewport
     320px e 1024px); i floor sono gli step inferiori della scala,
     leggibili a 320px. */
  --text-base: 1rem;       /* 16px  — body, minimo assoluto */
  --text-md:   1.25rem;    /* 20px  — lead, H3 */
  --text-lg:   1.5625rem;  /* 25px  — H2 mobile */
  --text-xl:   1.9531rem;  /* 31.25px — H2 desktop / H1 mobile */
  --text-2xl:  clamp(1.9531rem, 1.7313rem + 1.1094vw, 2.4414rem); /* 31.25→39.06px — H1 */
  --text-3xl:  clamp(2.4414rem, 2.1637rem + 1.3878vw, 3.0518rem); /* 39.06→48.83px — hero display */
  --text-4xl:  clamp(3.0518rem, 2.1663rem + 4.4276vw, 5rem);      /* 48.83→80px — numeri giorno */

  --leading-body: 1.6;
  --leading-heading: 1.2;

  /* ------------------------------------------------------------------------
     SPAZIATURA — scala chiusa. Nessun valore fuori da questi otto.
     ------------------------------------------------------------------------ */

  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ------------------------------------------------------------------------
     FORMA — dal linguaggio a cerchi del logo
     ------------------------------------------------------------------------ */

  --radius: 1rem;        /* 16px — card, blocchi, immagini */
  --radius-pill: 999px;  /* CTA, tab giorno, badge orario: eco dei cerchi del logo */

  /* ------------------------------------------------------------------------
     MOVIMENTO — solo transform/opacity nei componenti (vincolo di progetto)
     ------------------------------------------------------------------------ */

  --transition-duration: 200ms;
  --transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1); /* ease standard, uscita morbida */
  --transition: var(--transition-duration) var(--transition-easing);
}

/* Stop totale del movimento: il token copre solo chi lo usa, il selettore
   universale copre anche @keyframes, transition dirette e smooth scroll JS. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}