:root {
  /* Variabili di altezze e grandezze */
  --size-menuVoice: 1.5rem;

  /* Variabili di colori */
  --color-home: #000000;
  --color-valigia: red;
  --color-calendario: orange;
  --color-profilo: blue;
  --color-homeText: #000000;
  --color-valigiaText: red;
  --color-calendarioText: orange;
  --color-profiloText: blue;

  /* Percentuale trasparenza blur */
  --percentuale-blur: 100px;

  --oro: #ffcc00;
  --blu: #003399;

  --verde: rgb(0, 140, 69);
  --bianco: rgb(244, 249, 255);
  --rosso: rgb(205, 33, 42);

  --oro-t: rgba(255, 204, 0, 0.7);
  --blu-t: rgba(0, 51, 153, 0.7);

  --verde-t: rgba(0, 140, 69, 0.7);
  --bianco-t: rgba(244, 249, 255, 0.7);
  --rosso-t: rgba(205, 33, 42, 0.7);

  /* === VARIANTI SCURE === */
  --oro-dark-25: color-mix(in srgb, var(--oro) 75%, black);
  --oro-dark-50: color-mix(in srgb, var(--oro) 50%, black);
  --oro-dark-75: color-mix(in srgb, var(--oro) 25%, black);

  --blu-dark-25: color-mix(in srgb, var(--blu) 75%, black);
  --blu-dark-50: color-mix(in srgb, var(--blu) 50%, black);
  --blu-dark-75: color-mix(in srgb, var(--blu) 25%, black);

  --verde-dark-25: color-mix(in srgb, var(--verde) 75%, black);
  --verde-dark-50: color-mix(in srgb, var(--verde) 50%, black);
  --verde-dark-75: color-mix(in srgb, var(--verde) 25%, black);

  --bianco-dark-25: color-mix(in srgb, var(--bianco) 75%, black);
  --bianco-dark-50: color-mix(in srgb, var(--bianco) 50%, black);
  --bianco-dark-75: color-mix(in srgb, var(--bianco) 25%, black);

  --rosso-dark-25: color-mix(in srgb, var(--rosso) 75%, black);
  --rosso-dark-50: color-mix(in srgb, var(--rosso) 50%, black);
  --rosso-dark-75: color-mix(in srgb, var(--rosso) 25%, black);

  /* === VARIANTI CHIARE === */
  --oro-light-25: color-mix(in srgb, var(--oro) 75%, white);
  --oro-light-50: color-mix(in srgb, var(--oro) 50%, white);
  --oro-light-75: color-mix(in srgb, var(--oro) 25%, white);

  --blu-light-25: color-mix(in srgb, var(--blu) 75%, white);
  --blu-light-50: color-mix(in srgb, var(--blu) 50%, white);
  --blu-light-75: color-mix(in srgb, var(--blu) 25%, white);

  --verde-light-25: color-mix(in srgb, var(--verde) 75%, white);
  --verde-light-50: color-mix(in srgb, var(--verde) 50%, white);
  --verde-light-75: color-mix(in srgb, var(--verde) 25%, white);

  --bianco-light-25: color-mix(in srgb, var(--bianco) 75%, white);
  --bianco-light-50: color-mix(in srgb, var(--bianco) 50%, white);
  --bianco-light-75: color-mix(in srgb, var(--bianco) 25%, white);

  --rosso-light-25: color-mix(in srgb, var(--rosso) 75%, white);
  --rosso-light-50: color-mix(in srgb, var(--rosso) 50%, white);
  --rosso-light-75: color-mix(in srgb, var(--rosso) 25%, white);

  /* === VARIANTI SCURE TRASPARENTI (alpha 0.7) === */
  --oro-dark-t25: color-mix(in srgb, var(--oro) 75%, black 30%);
  --oro-dark-t50: color-mix(in srgb, var(--oro) 50%, black 30%);
  --oro-dark-t75: color-mix(in srgb, var(--oro) 25%, black 30%);

  --blu-dark-t25: color-mix(in srgb, var(--blu) 75%, black 30%);
  --blu-dark-t50: color-mix(in srgb, var(--blu) 50%, black 30%);
  --blu-dark-t75: color-mix(in srgb, var(--blu) 25%, black 30%);

  --verde-dark-t25: color-mix(in srgb, var(--verde) 75%, black 30%);
  --verde-dark-t50: color-mix(in srgb, var(--verde) 50%, black 30%);
  --verde-dark-t75: color-mix(in srgb, var(--verde) 25%, black 30%);

  --bianco-dark-t25: color-mix(in srgb, var(--bianco) 75%, black 30%);
  --bianco-dark-t50: color-mix(in srgb, var(--bianco) 50%, black 30%);
  --bianco-dark-t75: color-mix(in srgb, var(--bianco) 25%, black 30%);

  --rosso-dark-t25: color-mix(in srgb, var(--rosso) 75%, black 30%);
  --rosso-dark-t50: color-mix(in srgb, var(--rosso) 50%, black 30%);
  --rosso-dark-t75: color-mix(in srgb, var(--rosso) 25%, black 30%);

  /* === VARIANTI CHIARE TRASPARENTI (alpha 0.7) === */
  --oro-light-t25: color-mix(in srgb, var(--oro) 75%, white 70%);
  --oro-light-t50: color-mix(in srgb, var(--oro) 50%, white 70%);
  --oro-light-t75: color-mix(in srgb, var(--oro) 25%, white 70%);

  --blu-light-t25: color-mix(in srgb, var(--blu) 75%, white 70%);
  --blu-light-t50: color-mix(in srgb, var(--blu) 50%, white 70%);
  --blu-light-t75: color-mix(in srgb, var(--blu) 25%, white 70%);

  --verde-light-t25: color-mix(in srgb, var(--verde) 75%, white 70%);
  --verde-light-t50: color-mix(in srgb, var(--verde) 50%, white 70%);
  --verde-light-t75: color-mix(in srgb, var(--verde) 25%, white 70%);

  --bianco-light-t25: color-mix(in srgb, var(--bianco) 75%, white 70%);
  --bianco-light-t50: color-mix(in srgb, var(--bianco) 50%, white 70%);
  --bianco-light-t75: color-mix(in srgb, var(--bianco) 25%, white 70%);

  --rosso-light-t25: color-mix(in srgb, var(--rosso) 75%, white 70%);
  --rosso-light-t50: color-mix(in srgb, var(--rosso) 50%, white 70%);
  --rosso-light-t75: color-mix(in srgb, var(--rosso) 25%, white 70%);
}

/* =====================================================================
   DESIGN TOKENS "v1 redesign" (dalla demo demo_v1_completa.html)
   Aggiunti in modo ADDITIVO: non cambiano nulla finché non li usi.
   Stessa palette del brand (blu/oro/verde/rosso/bianco) + token raffinati
   per il restyle in stile glassmorphism.
   Per attivare il nuovo font sull'intero sito basta importare Inter e
   impostare  body { font-family: var(--font-ui); }
   ===================================================================== */
:root {
  /* tipografia */
  --font-ui: "Inter", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* testo e linee */
  --ink:   #16233a;            /* testo principale, blu-navy scuro     */
  --muted: #5b6b86;            /* testo secondario / didascalie        */
  --line:  rgba(0, 51, 153, .12); /* bordi sottili coerenti col blu    */
  --blu-dark-soft: color-mix(in srgb, var(--blu) 78%, black);

  /* superfici / vetro */
  --glass-bg:        rgba(255, 255, 255, .42);
  --glass-bg-scroll: rgba(255, 255, 255, .68);
  --glass-border:    rgba(255, 255, 255, .60);
  --glass-blur:      blur(14px) saturate(160%);

  /* raggi e ombre */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 20px;
  --shadow-sm: 0 6px 16px rgba(0, 51, 153, .08);
  --shadow:    0 10px 30px rgba(0, 51, 153, .12);
  --shadow-lg: 0 14px 40px rgba(0, 51, 153, .18);
}