/* ============================================================
   DESIGN SYSTEM 2026 — Prof. Antonio Adinolfi
   Piattaforma didattica digitale — Informatica
   ------------------------------------------------------------
   Fonte unica di verità per colori, tipografia, spaziatura e
   componenti condivisi in tutte le pagine del sito.
   Ogni pagina la include con:
     <link rel="stylesheet" href="design-system.css">
   PRIMA del proprio <style> locale, così può continuare a
   usare i propri nomi di variabile (es. --navy, --gold in
   index.html) mappandoli su queste variabili canoniche, senza
   dover riscrivere selettori o classi già in uso da JavaScript.
   ============================================================ */

:root {
  /* ---- Colore: identità "Modern Educational Technology" ---- */
  /* PRIMARY — blu profondo/tecnologico (base dell'identità già
     collaudata in index.html, qui reso variabile condivisa) */
  --color-primary:        #0d1b2e;
  --color-primary-dark:   #081422;
  --color-primary-light:  #1e3250;

  /* SECONDARY — indaco controllato, per dare il taglio "tech"
     richiesto dal prompt accanto al navy istituzionale */
  --color-secondary:      #3a4a7a;
  --color-secondary-light:#5a6aa0;

  /* ACCENT — usato SOLO per CTA, stato attivo, informazioni
     importanti (mai come colore diffuso) */
  --color-accent:         #c8963e;
  --color-accent-light:   #e8b96a;
  --color-accent-pale:    rgba(200,150,62,0.12);

  /* Superfici e sfondo */
  --color-background:     #f7f4ef;
  --color-background-2:   #efe9df;
  --color-surface:        #ffffff;

  /* Testo */
  --color-text:           #1a1a1a;
  --color-muted:          #5c5c5c;

  /* Bordi e stati */
  --color-border:         rgba(0,0,0,0.09);
  --color-border-accent:  rgba(200,150,62,0.22);
  --color-success:        #2e7d4f;
  --color-warning:        #b8862c;
  --color-danger:         #b33d3d;

  /* ---- Tipografia ---- */
  /* Sans-serif contemporaneo per corpo testo, nav, bottoni:
     leggibilità ottima su ogni dispositivo. Il serif elegante
     resta riservato, con parsimonia, a titoli/numeri display. */
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-mono:  'DM Mono', 'Courier New', monospace;

  /* Scala tipografica — ricalibrata per il container allargato
     (v. --container-max sotto): su 1320px i vecchi valori
     apparivano piccoli e "annegati" nello spazio disponibile. */
  --text-h1:    clamp(2.6rem, 5vw, 4.2rem);
  --text-h2:    clamp(1.8rem, 3vw, 2.6rem);
  --text-h3:    1.4rem;
  --text-h4:    1.15rem;
  --text-body:  1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  /* ---- Griglia e container ----
     Prima di questa modifica ogni pagina definiva il proprio
     max-width in modo indipendente (es. 980px in index.html,
     920px in agenda.html), causando margini eccessivi su
     schermi desktop. Queste variabili diventano la fonte unica. */
  --container-max:    1320px;  /* contenuto denso, sezioni principali */
  --container-narrow: 860px;   /* testo lungo/editoriale: privacy, pubblicazioni */
  --container-pad:    clamp(1.25rem, 4vw, 3rem);
  --space-section:    clamp(3rem, 6vw, 5.5rem);  /* ritmo verticale tra sezioni */

  /* ---- Spaziatura, superfici, raggio ---- */
  --radius:       8px;
  --radius-lg:    12px;
  --shadow:       0 4px 20px rgba(0,0,0,0.07);
  --shadow-hover: 0 10px 32px rgba(0,0,0,0.12);

  /* Transizioni — micro-interazioni eleganti, mai aggressive */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;

  /* ---- Agenda: colori categoria evento ----
     Nessuna nuova tinta introdotta: ogni categoria riusa una
     variabile di colore già definita sopra, così l'Agenda resta
     coerente con la palette navy/oro del sito. Il JavaScript
     dell'Agenda legge questi colori solo tramite le classi
     .cat-* sottostanti — non li ha mai hardcoded. */
  --cat-lezione:      var(--color-secondary);
  --cat-seminario:    var(--color-primary-light);
  --cat-evento:       var(--color-accent);
  --cat-pcto-stem:    var(--color-success);
  --cat-appuntamento: var(--color-secondary-light);
  --cat-verifica:     var(--color-danger);
  --cat-scadenza:     var(--color-warning);
}

/* Classi di categoria evento, riusate da agenda.html.
   Un solo punto di verità: cambiare qui aggiorna automaticamente
   pallini, bordi ed etichette ovunque nell'Agenda. */
.cat-lezione      { --cat-color: var(--cat-lezione); }
.cat-seminario    { --cat-color: var(--cat-seminario); }
.cat-evento       { --cat-color: var(--cat-evento); }
.cat-pcto-stem    { --cat-color: var(--cat-pcto-stem); }
.cat-appuntamento { --cat-color: var(--cat-appuntamento); }
.cat-verifica     { --cat-color: var(--cat-verifica); }
.cat-scadenza     { --cat-color: var(--cat-scadenza); }

/* Rispetto delle preferenze di accessibilità utente */
@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;
  }
}