/* La Notte delle Lumere — design tokens (v1, 6-ott-2026)
   Font (Google Fonts), da mettere nel <head> PRIMA di questo file:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
   Display: IM Fell English (caratteri di stampa del Seicento, aspetto da xilografia/almanacco).
   Etichette, numeri, maiuscoletto: IM Fell English SC.
   Corpo: Spectral 400/600 + corsivo, leggibile a 17px.
*/
:root {
  /* palette di base (fissa, non cambia col tema) */
  --c-notte: #0b0a08;
  --c-notte-2: #14110d;
  --c-notte-3: #221c15;
  --c-carta: #efe6d2;
  --c-carta-chiara: #f7f0de;
  --c-carta-scura: #d9ccae;
  --c-inchiostro: #1f1913;
  --c-inchiostro-2: #4a4036;
  --c-brace: #e08a2c;        /* luce di candela: SOLO accenti, fiamme, CTA */
  --c-brace-chiara: #f6c26b;
  --c-brace-scura: #a85a14;  /* testo arancio su carta (contrasto AA) */
  --c-cenere: #8d867a;
  --c-sangue-secco: #6e2a1f; /* pochissimo: cuori ex-voto, la lumera n.13 */

  /* ruoli (tema chiaro = carta, default) */
  --bg: var(--c-carta);
  --bg-alt: var(--c-carta-scura);
  --bg-card: var(--c-carta-chiara);
  --fg: var(--c-inchiostro);
  --fg-muted: var(--c-inchiostro-2);
  --line: rgba(31, 25, 19, .28);
  --accent: var(--c-brace-scura);
  --accent-fill: var(--c-brace);
  --on-accent: var(--c-notte);
  --focus: var(--c-brace);
  --paper-texture: url("../img/texture-carta.svg");
  --texture-opacity: .55;

  /* tipografia */
  --font-display: "IM Fell English", "IM Fell DW Pica", Georgia, "Times New Roman", serif;
  --font-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --fs-body: 1.0625rem;      /* 17px */
  --lh-body: 1.6;
  --fs-small: .9375rem;
  --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 5vw, 5.5rem);
  --tracking-sc: .14em;

  /* spaziature (scala 4px) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --gutter: 16px;
  --w-testo: 40rem;
  --w-pagina: 72rem;

  /* raggi: quasi nulli, è carta stampata */
  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-pill: 999px;

  /* ombre: inchiostro, non vetro */
  --sh-1: 0 1px 0 rgba(31, 25, 19, .18);
  --sh-2: 0 2px 0 rgba(31, 25, 19, .2), 0 8px 20px -10px rgba(31, 25, 19, .35);
  --sh-glow: 0 0 0 1px rgba(224, 138, 44, .5), 0 0 24px rgba(224, 138, 44, .35);

  /* bordi della cornice ex-voto */
  --frame: 3px solid var(--fg);
  --frame-inner: 1px solid var(--fg);

  --dur: 180ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

/* tema notte: automatico… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--c-notte);
    --bg-alt: var(--c-notte-2);
    --bg-card: var(--c-notte-3);
    --fg: var(--c-carta);
    --fg-muted: #bdb3a0;
    --line: rgba(239, 230, 210, .22);
    --accent: var(--c-brace-chiara);
    --accent-fill: var(--c-brace);
    --on-accent: var(--c-notte);
    --texture-opacity: .18;
    --sh-1: 0 1px 0 rgba(0, 0, 0, .5);
    --sh-2: 0 2px 0 rgba(0, 0, 0, .5), 0 10px 24px -10px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
/* …o forzato dall'interruttore */
:root[data-theme="dark"] {
  --bg: var(--c-notte);
  --bg-alt: var(--c-notte-2);
  --bg-card: var(--c-notte-3);
  --fg: var(--c-carta);
  --fg-muted: #bdb3a0;
  --line: rgba(239, 230, 210, .22);
  --accent: var(--c-brace-chiara);
  --accent-fill: var(--c-brace);
  --on-accent: var(--c-notte);
  --texture-opacity: .18;
  --sh-1: 0 1px 0 rgba(0, 0, 0, .5);
  --sh-2: 0 2px 0 rgba(0, 0, 0, .5), 0 10px 24px -10px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* base minima che usa i token */
html { background: var(--bg); color: var(--fg); }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
}
/* grana di carta su tutta la pagina (non intercetta i clic) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--paper-texture);
  background-size: 400px 400px;
  opacity: var(--texture-opacity);
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }
body > * { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0 0 var(--s-4); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.sc, .etichetta { font-family: var(--font-sc); letter-spacing: var(--tracking-sc); text-transform: lowercase; }
a { color: var(--accent); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* icone monocromatiche via maschera: <span class="icona" style="--i:url(.../candela.svg)"></span> */
.icona {
  display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.22em;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
/* cornice ex-voto per card e ritratti */
.exvoto { border: var(--frame); outline: var(--frame-inner); outline-offset: -9px; background: var(--bg-card); box-shadow: var(--sh-2); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }