/* ============================================================
   NOTAG BASE — TOKEN
   Sorgente unica del design system: theme.json.
   Qui i preset generati da WordPress (--wp--preset--*) vengono
   rimappati in nomi brevi --nt-* usati da tutto il tema.
   Il secondo valore è il fallback: serve a far funzionare i
   componenti anche fuori da WordPress (styleguide, prototipi,
   anteprime inviate a un cliente).
   REGOLA: nessun componente scrive un colore o una misura a mano.
   Dal brand board "Immagine coordinata v1.0".
   ============================================================ */

:root{

  /* ---------- Colore ---------- */
  --nt-rosso:        var(--wp--preset--color--rosso, #D5001A);       /* segnale: cartellino, CTA, accenti */
  --nt-rosso-scuro:  var(--wp--preset--color--rosso-scuro, #B30016); /* solo hover/pressed */
  --nt-nero:         var(--wp--preset--color--nero, #121212);        /* testo, wordmark, fondi bold */
  --nt-nero-fondo:   var(--wp--preset--color--nero-fondo, #0E0E0E);  /* fondo sezioni scure */
  --nt-carta:        var(--wp--preset--color--carta, #FFFFFF);       /* fondo primario */
  --nt-carta-calda:  var(--wp--preset--color--carta-calda, #F4F3F1); /* superficie alternativa */
  --nt-nebbia:       var(--wp--preset--color--nebbia, #E9E8E6);      /* superfici, separatori, disabilitato */
  --nt-fumo:         var(--wp--preset--color--fumo, #6E6E6B);        /* testo secondario, didascalie */
  --nt-fumo-chiaro:  var(--wp--preset--color--fumo-chiaro, #8A8A88); /* meta su fondo chiaro */
  --nt-blu:          var(--wp--preset--color--blu, #2149E0);         /* SOLO interfaccia: focus, link di sistema */

  --nt-superficie-scura: #1A1A18;  /* card e riquadri dentro le sezioni scure */

  /* Righe e velature, derivate: non sono colori nuovi del brand */
  --nt-riga:         color-mix(in srgb, var(--nt-nero) 12%, transparent);
  --nt-riga-scura:   rgba(255,255,255,.08);
  --nt-velo:         rgba(18,18,18,.92);   /* barra header solida */

  /* ---------- Tipografia ---------- */
  --nt-display: var(--wp--preset--font-family--display, 'Archivo Black', 'Archivo', system-ui, sans-serif);
  --nt-testo:   var(--wp--preset--font-family--testo, 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif);
  --nt-meta:    var(--wp--preset--font-family--meta, 'Space Mono', ui-monospace, Menlo, monospace);

  --nt-size-meta:        var(--wp--preset--font-size--meta, 0.8125rem);
  --nt-size-corpo:       var(--wp--preset--font-size--corpo, 1.0625rem);
  --nt-size-corpo-g:     var(--wp--preset--font-size--corpo-grande, 1.25rem);
  --nt-size-sottotitolo: var(--wp--preset--font-size--sottotitolo, clamp(1.25rem, 1rem + 1vw, 1.5rem));
  --nt-size-titolo:      var(--wp--preset--font-size--titolo, clamp(2rem, 1.2rem + 3.4vw, 3rem));
  --nt-size-display:     var(--wp--preset--font-size--display, clamp(2.75rem, 1rem + 7vw, 5.5rem));

  --nt-ls-display: -0.03em;   /* Archivo Black serrato, come da brand board */
  --nt-ls-titolo:  -0.02em;
  --nt-ls-meta:    0.08em;    /* etichette mono */
  --nt-ls-firma:   0.14em;    /* firme e diciture lunghe */
  --nt-lh-stretta: 1.05;
  --nt-lh-testo:   1.6;

  /* ---------- Spazio ---------- */
  --nt-space-1:  var(--wp--preset--spacing--10, 0.25rem);
  --nt-space-2:  var(--wp--preset--spacing--20, 0.5rem);
  --nt-space-3:  var(--wp--preset--spacing--30, 0.75rem);
  --nt-space-4:  var(--wp--preset--spacing--40, 1rem);
  --nt-space-5:  var(--wp--preset--spacing--50, 1.5rem);
  --nt-space-6:  var(--wp--preset--spacing--60, 2rem);
  --nt-space-7:  var(--wp--preset--spacing--70, 3rem);
  --nt-space-8:  var(--wp--preset--spacing--80, 4rem);
  --nt-space-9:  var(--wp--preset--spacing--90, 6rem);
  --nt-space-10: var(--wp--preset--spacing--100, 8rem);

  /* ---------- Griglia ---------- */
  --nt-max:      1360px;                      /* larghezza massima, come la riga dell'header */
  --nt-max-testo: 760px;                      /* misura di lettura */
  --nt-gutter:   clamp(20px, 4vw, 48px);
  --nt-sezione-y: clamp(3.5rem, 8vw, 8rem);   /* respiro verticale delle sezioni */

  /* ---------- Forma e movimento ---------- */
  --nt-raggio:   8px;      /* cartellino, CTA */
  --nt-raggio-s: 4px;
  --nt-ease:     cubic-bezier(.4,0,.2,1);
  --nt-tempo:    .25s;
  --nt-tempo-l:  .35s;
  --nt-tilt:     -2deg;    /* il dondolio del cartellino */
  --nt-ombra:    0 18px 40px rgba(18,18,18,.14);

  /* ---------- Superficie corrente ----------
     Le sezioni scure ridefiniscono queste tre variabili e tutti i
     componenti dentro si adattano da soli, senza varianti dedicate. */
  --nt-fondo:        var(--nt-carta);
  --nt-inchiostro:   var(--nt-nero);
  --nt-inchiostro-2: var(--nt-fumo);
  --nt-bordo:        var(--nt-riga);

  /* Il fondo dei riquadri immagine. Le immagini non si tagliano mai:
     ognuna tiene le sue proporzioni dentro un riquadro di questo
     colore, che sui formati diversi si vede come una fascia. */
  --nt-riquadro:     var(--nt-carta-calda);
}

/* Superficie scura: si applica a una sezione, non al body */
.nt-scuro{
  --nt-fondo:        var(--nt-nero);
  --nt-inchiostro:   var(--nt-carta);
  --nt-inchiostro-2: var(--nt-fumo-chiaro);
  --nt-bordo:        var(--nt-riga-scura);
  --nt-riquadro:     var(--nt-superficie-scura);
}

/* Superficie carta calda */
.nt-carta-calda{
  --nt-fondo: var(--nt-carta-calda);
}