/*
  Design tokens — Società Dante Alighieri, Comitato di Friburgo
  Due livelli: primitivi (valori grezzi) -> semantici (nomi per intento).
  Quando cambi un colore/font/spazio, cambialo QUI: tutte le pagine che
  linkano questo file si aggiornano da sole. Non scrivere mai un valore
  esadecimale o un px nelle pagine — referenzia un token.

  Nota: niente JavaScript qui dentro, solo CSS. Il sito gira su un runtime
  proprietario (support.js/image-slot.js) che fa la propria gestione del DOM
  — un file CSS linkato con <link> non lo tocca in nessun modo, quindi è
  sicuro al 100%. Vedi .claude/skills/pubblica-dante-sito/SKILL.md per cosa
  invece NON è sicuro (un Web Component ha già causato un crash in passato).
*/

:root {
  /* --- Primitivi (estratti dal sito esistente, non inventati) --- */
  --color-cream-50: #F0F0EE;
  --color-cream-100: #F5F1EE;
  --color-cream-200: #E9E9E6;
  --color-ink-900: #111111;
  --color-ink-700: #2a2a2a;
  --color-ink-600: #3a3a3a;
  --color-ink-500: #5a5a5a;
  --color-ink-400: #6b6b6b;
  --color-red-700: #A50B18;
  --color-red-400: #F0555F;
  --color-white: #ffffff;

  /* --- Semantici: usa questi nelle pagine, non i primitivi direttamente --- */
  --color-bg: var(--color-cream-50);
  --color-bg-panel-dark: var(--color-ink-900);
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-ink-500);
  --color-text-faint: var(--color-ink-400);
  --color-text-on-dark: var(--color-cream-100);
  --color-accent: var(--color-red-700);
  --color-accent-soft: var(--color-red-400);
  --color-border: var(--color-cream-200);

  /* --- Tipografia --- */
  --font-display: 'Bodoni Moda', serif;   /* titoli grandi */
  --font-body: Archivo, sans-serif;        /* tutto il resto */

  /*
    Pesi: 3 soli livelli, deliberatamente (ricerca: NN/g, Smashing Magazine).
    Oltre 2-3 pesi per famiglia le differenze diventano troppo fini per
    essere percepite — il sito nasceva con 5 pesi (400/500/600/700/800);
    500 e 800 sono fuori sistema. Più enfasi di --weight-strong si ottiene
    con dimensione o colore, mai con un quarto peso.
  */
  --weight-body: 400;
  --weight-medium: 600;   /* sottotitoli, voci di menu, enfasi media */
  --weight-strong: 700;   /* titoli, bottoni, call-to-action */

  /* --- Movimento --- */
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --transition-base: background .35s ease, transform .35s var(--ease-out-soft), box-shadow .35s ease;

  /*
    Spaziatura — scala osservata nel sito (6/10/14/20/24/34/60) più due
    livelli "narrativi" per lo spazio tra sezioni (prima valori fissi fuori
    scala: 110px/140px scritti a mano). Usa i livelli narrativi SOLO tra
    sezioni di contenuto narrativo/identitario (chi siamo, storia, hero);
    nei blocchi con informazioni pratiche (orari, quote, scadenze) usa gli
    step piccoli — lì conta la scansione rapida, non il respiro visivo.
  */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 34px;
  --space-7: 60px;
  --space-narrative-lg: 72px;
  --space-narrative-xl: 96px;

  /*
    Ombre e bordi — un solo stile per tipo di elemento, per ridurre il
    "rumore visivo" (ricerca: coerenza = meno carico cognitivo). Non
    inventare una nuova ombra/bordo per ogni elemento: usa questi.
  */
  --shadow-soft: 0 18px 40px rgba(17, 17, 17, .25);
  --border-hairline: 1px solid var(--color-border);

  --z-dropdown: 70;
  --z-header: 50;
}