/* =============================================================================
   CREDITLINE — DESIGN TOKENS
   -----------------------------------------------------------------------------
   UNICA FONTE DI VERITÀ per colore, tipografia, spazio, raggio, ombra, motion.
   Nessun componente deve contenere valori hardcoded: se scrivi #00805f dentro
   un componente, hai sbagliato.

   ⚠️ STATO: PROVVISORIO.
   Il design system di CreditLine by Quantum non esiste ancora come deliverable.
   Questi valori sono campionati dalla bozza HTML di Riccardo (già coerente col
   brief di marzo) e dagli asset del sito esistente. Quando il team Design
   consegna il sistema definitivo si sostituisce SOLO questo file.

   Scala tipografica: 1.200 (minor third) — controllata, adatta a un contesto
   finanziario. Scala spaziale: base 4px.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     1. COLORE — primitive
     Il verde è il colore del brand: superfici affermative, CTA, card "Noi".
     Il blu è funzionale: link e focus. L'oro solo per le stelle recensioni.
     --------------------------------------------------------------------------- */
  --cl-verde-900: #005845;
  --cl-verde-800: #006a51;
  --cl-verde-700: #00805f;   /* primario */
  --cl-verde-600: #008a67;
  --cl-verde-400: #308876;
  --cl-verde-100: #d9ebe5;
  --cl-verde-050: #eef6f3;

  --cl-blu-700:   #02439e;
  --cl-azzurro:   #92d2fd;
  --cl-oro:       #f5a623;

  --cl-inchiostro: #14211d;
  --cl-grigio-700: #4a5a55;
  --cl-grigio-400: #8a9691;
  --cl-grigio-200: #dfe6e3;
  --cl-neutro-100: #f2f5f4;
  --cl-neutro-050: #f8faf9;
  --cl-bianco:     #ffffff;

  --cl-errore:     #c0392b;
  --cl-errore-bg:  #fdf1ef;
  --cl-avviso:     #8a6100;
  --cl-avviso-bg:  #fff8e6;
  --cl-successo:   #1c7a4f;

  /* ---------------------------------------------------------------------------
     2. COLORE — semantica
     I componenti usano SOLO questi. Le primitive sopra non si citano mai
     direttamente in un componente.
     --------------------------------------------------------------------------- */
  --cl-bg:                 var(--cl-bianco);
  --cl-bg-alt:             var(--cl-neutro-050);
  --cl-bg-sezione:         var(--cl-neutro-100);
  --cl-bg-brand:           var(--cl-verde-700);
  --cl-bg-brand-tenue:     var(--cl-verde-050);

  --cl-testo:              var(--cl-inchiostro);
  --cl-testo-secondario:   var(--cl-grigio-700);
  --cl-testo-tenue:        var(--cl-grigio-400);
  --cl-testo-su-brand:     var(--cl-bianco);

  --cl-bordo:              var(--cl-grigio-200);
  --cl-bordo-forte:        var(--cl-grigio-400);
  --cl-focus:              var(--cl-blu-700);

  --cl-azione:             var(--cl-verde-700);
  --cl-azione-hover:       var(--cl-verde-800);
  --cl-azione-attiva:      var(--cl-verde-900);
  --cl-azione-testo:       var(--cl-bianco);

  /* Il numero della rata: unico punto in cui il verde diventa dato, non superficie */
  --cl-dato-evidenza:      var(--cl-verde-700);

  /* ---------------------------------------------------------------------------
     3. TIPOGRAFIA
     Una sola famiglia. In finanza la varietà tipografica legge come confusione.
     Font di sistema in fallback per non bloccare il rendering.
     --------------------------------------------------------------------------- */
  --cl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cl-font-numeri: var(--cl-font);   /* tabular-nums via font-variant-numeric */

  --cl-size-2xs:  0.75rem;   /* 12 — micro-copy, disclaimer */
  --cl-size-xs:   0.8125rem; /* 13 — label, badge */
  --cl-size-sm:   0.875rem;  /* 14 — testo secondario */
  --cl-size-base: 1rem;      /* 16 — corpo */
  --cl-size-md:   1.125rem;  /* 18 — sottotitoli */
  --cl-size-lg:   1.375rem;  /* 22 — h3 */
  --cl-size-xl:   1.75rem;   /* 28 — h2 mobile */
  --cl-size-2xl:  2.375rem;  /* 38 — h2 desktop */
  --cl-size-3xl:  3rem;      /* 48 — h1 desktop */
  --cl-size-rata: 2rem;      /* 32 — importo rata in card */

  --cl-peso-normale: 400;
  --cl-peso-medio:   500;
  --cl-peso-semi:    600;
  --cl-peso-forte:   700;

  --cl-lh-stretta:  1.15;
  --cl-lh-media:    1.35;
  --cl-lh-corpo:    1.55;

  --cl-ls-titolo: -0.02em;
  --cl-ls-eyebrow: 0.08em;

  /* ---------------------------------------------------------------------------
     4. SPAZIO — base 4px
     --------------------------------------------------------------------------- */
  --cl-sp-1:  0.25rem;
  --cl-sp-2:  0.5rem;
  --cl-sp-3:  0.75rem;
  --cl-sp-4:  1rem;
  --cl-sp-5:  1.25rem;
  --cl-sp-6:  1.5rem;
  --cl-sp-8:  2rem;
  --cl-sp-10: 2.5rem;
  --cl-sp-12: 3rem;
  --cl-sp-16: 4rem;
  --cl-sp-20: 5rem;
  --cl-sp-24: 6rem;

  --cl-sezione-y: clamp(var(--cl-sp-12), 7vw, var(--cl-sp-24));
  /* 1425px / 90px: stessa larghezza e stesso margine laterale del container di
     Salient sul sito (--container-width/--container-padding letti dal tema
     live), non un valore nostro. Il gutter è fluido perché il tema riduce il
     suo padding sotto desktop e 90px fissi spaccherebbero il mobile. */
  --cl-contenitore: 1425px;
  --cl-contenitore-stretto: 760px;
  --cl-gutter: clamp(20px, 6vw, 90px);

  /* ---------------------------------------------------------------------------
     5. FORMA
     --------------------------------------------------------------------------- */
  --cl-r-sm: 8px;
  --cl-r-md: 12px;
  --cl-r-lg: 20px;
  --cl-r-xl: 28px;
  --cl-r-pill: 999px;

  --cl-bordo-sottile: 1px solid var(--cl-bordo);

  /* Ombre: verdi, non nere. Un'ombra nera su fondo verde legge come sporco. */
  --cl-ombra-lieve: 0 2px 10px rgba(0, 60, 45, 0.07);
  --cl-ombra-card:  0 18px 44px -16px rgba(0, 60, 45, 0.28), 0 2px 8px rgba(0, 60, 45, 0.06);
  --cl-ombra-alta:  0 32px 64px -20px rgba(0, 60, 45, 0.34);

  /* ---------------------------------------------------------------------------
     6. MOTION
     Niente rimbalzi. In finanza il movimento deve essere sobrio: entra, si ferma.
     --------------------------------------------------------------------------- */
  --cl-durata-rapida: 120ms;
  --cl-durata-media:  220ms;
  --cl-durata-lenta:  360ms;
  --cl-easing:        cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------------------------------------------------------------------------
     7. LAYER
     --------------------------------------------------------------------------- */
  --cl-z-sticky:  100;
  --cl-z-overlay: 800;
  --cl-z-tooltip: 900;
}

/* -----------------------------------------------------------------------------
   Regole trasversali che dipendono dai token e valgono ovunque.
   ----------------------------------------------------------------------------- */
.cl-numero {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.cl-eyebrow {
  font-size: var(--cl-size-xs);
  font-weight: var(--cl-peso-semi);
  letter-spacing: var(--cl-ls-eyebrow);
  text-transform: uppercase;
  color: var(--cl-testo-tenue);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cl-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

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