:root {
  /* Colori di marca */
  --color-primary: #398af4;
  --color-primary-strong: #0e68dd;
  --color-primary-on-light: #0d70f2;
  --color-secondary: #35e5ce;
  --color-accent: #92e1ff;

  /* Neutri (sfondo scuro, derivati dal blu) */
  --color-bg: #0a1526;
  --color-surface: #142034;
  --color-surface-raised: #1b2a47;
  --color-border: #28395c;
  --color-text-primary: #f5f8fd;
  --color-text-secondary: #b9c6de;

  /* Stati */
  --color-error: #ff6b6b;
  --color-success: #4ade80;

  /* Header flottante "vetro smerigliato" (stessi colori di surface/border,
     resi semi-trasparenti: rgba usato invece di color-mix() per compatibilità
     con browser meno recenti) */
  /* Opacità 0,85 e non meno: scorrendo, la pillola passa anche sopra il
     pulsante bianco dell'apertura, e lì le voci del menu
     (--color-text-secondary) devono restare almeno a 4,5:1 — a 0,85 sono
     5,9:1 nel caso peggiore (bianco pieno sotto), a 0,75 scendevano a 4,2:1 */
  --color-glass-bg: rgba(20, 32, 52, 0.85); /* da --color-surface #142034 */
  --color-glass-border: rgba(40, 57, 92, 0.6); /* da --color-border #28395c */

  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.35);

  /* Home: schede "profonde" (apertura e chiusura), bagliori decorativi */
  --color-bg-deep: #060e1b;
  --color-glow-primary: rgba(57, 138, 244, 0.22); /* da --color-primary */
  --color-glow-secondary: rgba(53, 229, 206, 0.12); /* da --color-secondary */

  /* Colori "di ruolo": i componenti usano questi, non i colori di marca
     direttamente, perché in versione chiara teal, azzurro e primary puro
     non si possono usare come testo (vedi CLAUDE.md e DESIGN.md) */
  --color-link: var(--color-primary);
  --color-highlight: var(--color-secondary); /* kicker, numeri, stati */
  --color-on-primary: #f5f8fd; /* testo/icone sopra --color-primary-strong, uguale nei due temi */
  /* Pulsante principale dell'apertura. Sfondo bianco PURO: con
     --color-primary-on-light sopra fa 4,55:1, su #F5F8FD scenderebbe a
     4,27:1 (non passa AA) */
  --color-cta-bg: #ffffff;
  --color-cta-text: var(--color-primary-on-light);

  /* Card delle 4 classi: si comportano come fotografie, scure in entrambi
     i temi, quindi questi colori NON cambiano nel tema chiaro. Un velo scuro
     molto leggero in basso tiene leggibile il nome della classe. */
  --color-on-image: #f5f8fd;
  --color-on-image-ink: #0a1526; /* testo dell'etichetta bianca */
  --color-image-shade: rgba(6, 14, 27, 0.95);
  /* Pillola "Scopri tutte…" (liquid glass): tinta scura sotto il vetro e
     pannello di riserva senza sfocatura */
  --color-label-tint: rgba(10, 20, 40, 0.5);
  --color-label-fallback: rgba(14, 24, 44, 0.82);
  /* Cielo della scena di sfondo dell'apertura: è il colore del bordo alto
     della scena (misurato, uniforme da sinistra a destra). Riempie il cielo
     sopra l'immagine su telefono e tablet, senza stacco visibile, e fa da
     riserva se l'immagine non si carica (stesso in entrambi i temi) */
  --color-scena-cielo: #72cbef;

  /* Font */
  --font-heading: "Montserrat", system-ui, Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, Arial, sans-serif;

  /* Dimensioni testo (mobile first) */
  /* Solo titolo dell'apertura: cresce in modo continuo da 32px (schermi
     stretti) a 64px (dai ~1370px in su), senza salti a metà che
     farebbero uscire le parole lunghe dalla colonna sui tablet */
  --font-size-display: clamp(2rem, 1rem + 3.5vw, 4rem);
  --font-size-lead: 1.125rem; /* 18px, solo sottotitolo dell'apertura */
  --font-size-h1: 2rem; /* 32px */
  --font-size-h2: 1.625rem; /* 26px */
  --font-size-h3: 1.3125rem; /* 21px */
  --font-size-body: 1rem; /* 16px */
  --font-size-small: 0.875rem; /* 14px */

  /* Interlinea */
  --line-height-h1: 1.15;
  --line-height-h2: 1.2;
  --line-height-h3: 1.25;
  --line-height-body: 1.6;
  --line-height-small: 1.5;

  /* Spaziatura lettere (solo titoli) */
  --letter-spacing-h1: -0.02em;
  --letter-spacing-h2: -0.015em;
  --letter-spacing-h3: -0.01em;

  /* Spaziature (passi di 4px) */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 3rem; /* 48px */
  --space-8: 4rem; /* 64px */

  /* Raggi */
  --radius-sm: 0.5rem; /* 8px */
  --radius-md: 0.75rem; /* 12px */
  --radius-pill: 999px;
  --radius-xl: 2rem; /* 32px, schede grandi della home */

  /* Ritmo verticale delle sezioni: lo spazio tra due sezioni è sempre il
     doppio di --section-pad (64px su telefono, 96px da 768px in su); stesso
     valore sotto l'ultimo contenuto, prima del piè di pagina */
  --section-pad: 2rem;

  /* Spazio riservato in cima alle pagine per l'header flottante */
  --header-offset: 5.5rem;

  /* Focus accessibile */
  --focus-ring-color: var(--color-accent);
  --focus-ring-width: 2px;
}

@media (min-width: 768px) {
  :root {
    --font-size-lead: 1.25rem; /* 20px */
    --font-size-h1: 3rem; /* 48px */
    --font-size-h2: 2.125rem; /* 34px */
    --font-size-h3: 1.5rem; /* 24px */
    --font-size-body: 1.0625rem; /* 17px */
    --section-pad: 3rem; /* 48px: 96px tra una sezione e l'altra */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-enabled: 0;
  }
}

/* Versione chiara: si attiva da sola se il dispositivo di chi visita è
   impostato sul tema chiaro (nessun pulsante, nessun dato salvato).
   Neutri derivati dal blu come quelli scuri; contrasti calcolati con la
   formula, compresi i casi peggiori (testo sui bagliori, pillola di vetro
   sopra elementi blu notte): tabella in DESIGN.md. */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f4f7fc;
    --color-surface: #ffffff;
    --color-surface-raised: #e8eef8;
    --color-border: #d3dceb;
    --color-text-primary: #0a1526;
    --color-text-secondary: #46546e;

    --color-error: #c62828;
    --color-success: #137333;

    --color-glass-bg: rgba(255, 255, 255, 0.85);
    --color-glass-border: rgba(211, 220, 235, 0.9); /* da --color-border chiaro */
    --shadow-float: 0 8px 32px rgba(10, 21, 38, 0.1);

    /* Le schede "profonde" diventano bianche su fondo grigio-azzurro */
    --color-bg-deep: #ffffff;
    --color-glow-primary: rgba(57, 138, 244, 0.14);
    --color-glow-secondary: rgba(53, 229, 206, 0.14);

    /* Blu scuro al posto di primary, teal e azzurro per testi, link e stati:
       5,9:1 sullo sfondo, 4,6:1 nel caso peggiore (sopra il vetro) */
    --color-link: #0a5bc4;
    --color-highlight: #0a5bc4;
    --color-cta-bg: #0a1526;
    --color-cta-text: #ffffff;
    --focus-ring-color: #0a5bc4;
  }
}