/* ==========================================================================
   Design tokens — Dott.ssa Valentina Toffoletto
   Custom properties, prefisso --vt-
   ========================================================================== */

:root{
  /* Colori primitivi */
  --vt-lilla-50:#EAE5FA;
  --vt-lilla-100:#C9C2FF;
  --vt-lilla-200:#B8BEFC;
  --vt-lilla-300:#A8ADE5;
  --vt-lilla-400:#7C6BE0;
  --vt-lilla-500:#6A57D6;
  --vt-lilla-600:#6152C9;
  --vt-lilla-900:#2C2780;
  --vt-lilla-velo:#D4C3E6;
  --vt-lilla-pallido:#EFECFF;

  --vt-turchese-100:#9BEDE5;
  --vt-turchese-200:#91DED6;
  --vt-turchese-400:#5FD6CB;
  --vt-turchese-600:#2FAEA3;
  --vt-turchese-900:#12463F;

  --vt-crema-50:#FBF6EF;
  --vt-crema-100:#F1ECE4;
  --vt-crema-200:#E3DCCF;

  --vt-inchiostro-900:#3A3540;
  --vt-inchiostro-700:#5A5348;
  --vt-inchiostro-500:#8A8175;

  --vt-bianco:#FFFFFF;
  --vt-bianco-lilla:#F4F1FF;

  --vt-giallo-macchia:#F7CE4D;
  --vt-giallo-banda:#FFD43B;
  --vt-giallo-pastiglia:#FFEFC2;
  --vt-giallo-forte:#8A6A12;

  --vt-rosso-macchia:#E8776A;
  --vt-rosso-banda:#F7A79D;
  --vt-rosso-pastiglia:#F7D4CD;
  --vt-rosso-forte:#C4392E;
  --vt-rosso-fondo:#FDF1EE;

  --vt-verde-macchia:#6FC998;
  --vt-verde-banda:#8FE3B3;
  --vt-verde-pastiglia:#E4F3E9;
  --vt-verde-forte:#2F7A52;
  --vt-verde-fondo:#F1F8F3;

  --vt-cover-lilla:#7C6BE0;
  --vt-cover-turchese:#5FD6CB;
  --vt-cover-salvia:#9ED1BA;
  --vt-cover-celeste:#DCEEF9;

  /* Semantic */
  --vt-fondo: var(--vt-crema-50);
  --vt-fondo-alt: var(--vt-crema-100);
  --vt-superficie: var(--vt-bianco);
  --vt-bordo: var(--vt-crema-200);
  --vt-testo: var(--vt-inchiostro-900);
  --vt-testo-secondario: var(--vt-inchiostro-700);
  --vt-etichetta: var(--vt-inchiostro-500);
  --vt-accento: var(--vt-lilla-400);        /* SOLO decorativo/titoli grandi, MAI testo piccolo — vedi regola contrasto sotto */
  --vt-accento-testo: var(--vt-lilla-600);  /* link e testo colorato — questo sì, sempre conforme AA */
  --vt-banda: var(--vt-lilla-100);
  --vt-pastiglia: var(--vt-lilla-50);

  /* Tipografia */
  --vt-font-titolo: "Quicksand", system-ui, sans-serif;
  --vt-font-corpo: "Mulish", system-ui, sans-serif;
  --vt-font-etichetta: "Space Mono", ui-monospace, monospace;

  /* Scala tipografica fluida (clamp, per pagina web reale) */
  --vt-fs-kicker: 12px;                          /* Space Mono, maiuscolo, tracking .12em — SEMPRE accompagnato da testo conforme adiacente, vedi nota contrasto */
  --vt-fs-body: clamp(16px, 1vw + 0.5rem, 17px);
  --vt-fs-body-lg: 18px;
  --vt-fs-h4: clamp(18px, 2vw, 20px);
  --vt-fs-h3: clamp(22px, 3vw, 26px);
  --vt-fs-h2: clamp(26px, 4vw, 34px);
  --vt-fs-h1: clamp(32px, 5vw, 52px);

  /* Spaziature (scala 8px) */
  --vt-space-1:4px;
  --vt-space-2:8px;
  --vt-space-3:16px;
  --vt-space-4:24px;
  --vt-space-5:32px;
  --vt-space-6:40px;
  --vt-space-7:56px;
  --vt-space-8:72px;
  --vt-space-9:96px;
  --vt-space-10:128px;

  /* Container/breakpoint */
  --vt-container-max: 1180px;
  --vt-gutter: clamp(20px, 5vw, 48px);
  /* breakpoint: mobile <600px · tablet 600–899px · desktop 900–1279px · wide ≥1280px */

  /* Radius */
  --vt-radius-xs: 12px;
  --vt-radius-sm: 16px;
  --vt-radius-btn: 999px;   /* pastiglia piena — semicerchio continuo su entrambi i lati corti (correzione: la versione asimmetrica 26px 30px 28px 26px lasciava un lato corto visibile a sinistra; DA ALLINEARE nel manuale/design system) */
  --vt-radius-md: 24px;                    /* card */
  --vt-radius-lg: 28px;                    /* pannelli */
  --vt-radius-xl: 40px;                    /* pannelli hero larghi */
  --vt-radius-circolo: 50%;                /* bolla immagine, sempre cerchio */

  /* Transizioni */
  --vt-transition: 180ms ease;

  /* Tema header/footer — fondo lilla pieno, come da strumento gemello (generatore prompt illustrazioni, tema chiaro) */
  /* Fondo lilla-500 (#6A57D6): testo bianco 5,32:1, AA. Prima lilla-400 (#7C6BE0, bianco 4,17:1, non conforme). */
  --vt-testata-fondo: var(--vt-lilla-500);  /* #6A57D6 */
  --vt-testata-blob: var(--vt-lilla-400);   /* #7C6BE0, macchia decorativa (più chiara del fondo, 1,28:1) */

  /* Testo su superfici chiare fisse (riquadri/pastiglie a tinta pastello, badge chiari):
     NON cambia col tema, perché quegli sfondi restano chiari anche in tema scuro. */
  --vt-testo-su-chiaro: #3A3540;
}

/* Tema scuro — selettore nell'header, chiaro resta il default (nessun data-tema = chiaro).
   Stessi valori già documentati nel design system (generatore prompt illustrazioni,
   tema scuro): nessun colore nuovo inventato, solo riapplicati al sito su richiesta
   esplicita — il manuale li riservava alle sole interfacce dei tool interni, quindi
   segnalo questo come scostamento da riportare in manuale/design system più avanti. */
[data-tema="scuro"]{
  --vt-fondo: var(--vt-lilla-900);
  --vt-fondo-alt: #251F6B;
  --vt-superficie: #372F96;
  --vt-bordo: #4A3EA8;
  --vt-testo: var(--vt-crema-50);
  --vt-testo-secondario: var(--vt-lilla-100);
  --vt-etichetta: var(--vt-lilla-300);
  --vt-accento: var(--vt-lilla-200);
  --vt-accento-testo: var(--vt-lilla-100);
  --vt-pastiglia: #37318F;

  /* Testata (header/footer) e macchie — anche loro cambiano in tema scuro nello
     strumento di riferimento (il fondo pieno passa da #7C6BE0 chiaro a #372F96 scuro).
     Le macchie chiare (lilla-200/turchese-100/lilla-pallido) restano invece fisse per
     via del token primitivo: su fondo scuro un blob quasi bianco a piena opacità copre
     il testo chiaro sopra di sé — qui vengono scurite in coppia con lo sfondo. */
  --vt-testata-fondo: #372F96;
  --vt-testata-blob: #4A3EA8;
}

[data-tema="scuro"] .vt-macchia--lilla{
  background: var(--vt-lilla-500);
}

[data-tema="scuro"] .vt-macchia--turchese{
  background: var(--vt-turchese-900);
}

[data-tema="scuro"] .vt-macchia--pallido{
  background: var(--vt-fondo-alt);
}

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

/* Banda di evidenziazione — sostituisce sempre la sottolineatura per le parole chiave nei titoli (manuale §4.2) */
.vt-banda{ background-image: linear-gradient(transparent 60%, var(--vt-banda) 60%); background-repeat: no-repeat; }