/* ============================================================================
   Prezzemolo Studio — design token
   ----------------------------------------------------------------------------
   Ereditati dal Kit Elementor del sito precedente (post 6) e dal logo.
   NON sono un'identità nuova: l'identità nuova è 💎 M2, e questa pagina è un
   ponte. Chi la riprende dopo M2 butta questo file, non lo estende.

   Fonte dei valori: estrazione dal `_elementor_page_settings` del Kit e da
   `logo-prezzemolo.svg`. Dove i due divergevano ha vinto il logo — vedi sotto.
   ========================================================================== */

:root {
  /* ── Colori ────────────────────────────────────────────────────────────────
     Il Kit dichiarava #7C6CAE e #B3D285, ma il logo — che è il marchio
     depositato nei fatti — usa #7B6CAE e #B2D182. Un digit di differenza,
     invisibile a occhio e visibilissima quando un SVG del logo sta accanto a
     un fondo "dello stesso" colore. Vince il logo.                          */
  --viola:            #7B6CAE;
  --verde:            #B2D182;
  --nero:             #333333;
  --bianco:           #FFFFFF;
  --bianco-sporco:    #FAFAFA;
  /* Nel Kit c'erano anche un grigio #474947, un giallo #FCC215 e un arancio
     #E8612B. Qui non compaiono e non li dichiaro: un token che nessuno usa è
     un invito a usarlo a caso. Se serviranno, si riprendono dal Kit. */

  /* Varianti di servizio, non decorative.
     ⚠️ --viola su bianco dà 4,57:1 — passa AA per il testo normale ma per un
     solo decimale, e fallisce appena il font scende sotto i 16px o si
     alleggerisce. Per QUALSIASI testo piccolo in viola si usa --viola-testo
     (5,81:1). Il --viola pieno resta per fondi, bordi e testo grande.        */
  --viola-testo:      #6B5C99;

  /* ⚠️ --verde su bianco dà 1,70:1. Non è un colore da testo: è un colore da
     fondo e da bordo. Su --nero arriva a 7,42:1 ed è leggibile.              */

  --fondo:            var(--bianco);
  --testo:            var(--nero);
  --testo-tenue:      #6B6B6B;     /* 5,33:1 su bianco, 5,08:1 su --bianco-sporco */

  /* ── Tipografia ───────────────────────────────────────────────────────────
     Il Kit dichiarava Poppins per h1/h2/bottoni, ma ogni widget della home
     forzava Open Sauce: il Kit era disallineato dal design reale. Si normalizza
     su Open Sauce, che è il carattere che il sito mostrava davvero.          */
  --font: "Open Sauce", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Scala fluida. Il minimo è la resa a 390px, il massimo a 1400px.
     L'hero arriva a 240px come nella bozza: è la firma tipografica del brand,
     non un vezzo, e sotto i 1000px si sgonfia da sé.                         */
  --t-hero:   clamp(3.25rem,  2.0vw + 12.0vw, 15rem);
  --t-giga:   clamp(2.5rem,   1.0rem + 8.5vw, 10rem);
  --t-h2:     clamp(2rem,     1.2rem + 3.2vw, 4.5rem);
  --t-h3:     clamp(1.5rem,   1.1rem + 1.6vw, 2.5rem);
  --t-lead:   clamp(1.125rem, 1.02rem + 0.5vw, 1.5rem);
  --t-body:   1rem;
  --t-small:  0.875rem;
  --t-eyebrow: 0.8125rem;

  --lh-stretta: 0.82;   /* titoli giganti: le righe si toccano quasi */
  --lh-media:   1.15;
  --lh-larga:   1.6;    /* corpo del testo */
  --ls-stretta: -0.04em;
  --ls-eyebrow: 0.12em;

  --w-light:  300;
  --w-normal: 400;
  --w-bold:   700;

  /* ── Spazio ───────────────────────────────────────────────────────────────
     Scala fluida: le sezioni respirano su desktop senza sprecare schermo su
     mobile, dove ogni 100px sprecati sono uno scroll in più.                 */
  --s-1:  0.5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2rem;
  --s-5:  clamp(2.5rem, 1.5rem + 3vw, 4rem);
  --s-6:  clamp(3.5rem, 2rem + 6vw, 7rem);
  --s-7:  clamp(5rem,   2rem + 10vw, 11rem);

  --gutter:      clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --contenitore: 1400px;   /* container_width del Kit */

  /* ── Forma ────────────────────────────────────────────────────────────────
     I bottoni erano pillole outline trasparenti con hover verde: è una firma
     riconoscibile del sito precedente e si conserva.                         */
  --raggio-pill: 100px;
  --raggio:      12px;
  --bordo:       1.5px solid currentColor;

  --transizione: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Il Kit fissava html a 16px e TUTTI i rem del sito ci poggiavano sopra.
   Non è ridondante con il default del browser: lo rende esplicito e immune a
   un utente che abbia cambiato la dimensione di base — che qui romperebbe la
   scala fluida invece di ingrandirla proporzionalmente. */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}