/* ==========================================================
   Base comune: caratteri, colori, pulsanti
   Caratteri: Alegreya e Alegreya Sans (SIL Open Font License)
   ========================================================== */

@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --font-titoli: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-testo: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;

  /* Scala tipografica (rapporto ~1,2) */
  --t-xs: 0.8125rem;
  --t-s: 0.9rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 1.875rem;
  --t-3xl: 2.5rem;

  --r-grande: 18px;
  --r-medio: 12px;
  --r-piccolo: 8px;
  --r-pillola: 999px;

  --durata: 0.9s;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Colori dei pigmenti della lana: robbia, guado, reseda, noce */
  --robbia: #B03A4A;
  --guado: #25345F;
  --reseda: #E2B33D;
  --noce: #7A5236;
}

/* Atmosfere: ogni sezione ha la sua luce */
body,
body[data-atmosfera="giorno"] {
  --sup: #FAFAF7;
  --sup-2: #F0EFE9;
  --sup-3: #E4E2D9;
  --testo: #1C2340;
  --testo-2: #535A70;
  --testo-3: #7A7F92;
  --linea: #DCD9CF;
  --accento: #25345F;
  --accento-2: #34477E;
  --su-accento: #FFFFFF;
  --enfasi: #B03A4A;
  --ombra: 0 1px 0 rgba(28, 35, 64, 0.05), 0 16px 36px -14px rgba(20, 26, 50, 0.38);
  --ombra-piccola: 0 1px 2px rgba(20, 26, 50, 0.18), 0 4px 12px -4px rgba(20, 26, 50, 0.22);
  color-scheme: light;
}
body[data-atmosfera="notte"] {
  --sup: #131A33;
  --sup-2: #1A2242;
  --sup-3: #252E53;
  --testo: #EFEADB;
  --testo-2: #B4B7CB;
  --testo-3: #8C90AA;
  --linea: #2C3559;
  --accento: #E2B33D;
  --accento-2: #F0C75A;
  --su-accento: #1B1505;
  --enfasi: #E2B33D;
  --ombra: 0 1px 0 rgba(0, 0, 0, 0.3), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  --ombra-piccola: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px -4px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
body[data-atmosfera="civico"] {
  --sup: #FFFFFF;
  --sup-2: #F2F3F1;
  --sup-3: #E5E7E3;
  --testo: #1C2232;
  --testo-2: #515869;
  --testo-3: #7A8090;
  --linea: #DEE0E2;
  --accento: #2F4B8A;
  --accento-2: #3B5AA0;
  --su-accento: #FFFFFF;
  --enfasi: #2F4B8A;
}
body[data-atmosfera="archivio"] {
  --sup: #EFE9DC;
  --sup-2: #E6DFCE;
  --sup-3: #DAD0BC;
  --testo: #2A2019;
  --testo-2: #5E4E40;
  --testo-3: #84725E;
  --linea: #D1C5AE;
  --accento: #8E2F3A;
  --accento-2: #A23A46;
  --su-accento: #FFFFFF;
  --enfasi: #8E2F3A;
  --ombra: 0 1px 0 rgba(58, 44, 34, 0.08), 0 16px 36px -14px rgba(58, 44, 34, 0.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t-m);
  line-height: 1.45;
  color: var(--testo);
  background: var(--sup);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-titoli); font-weight: 700; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }

.icona { flex: none; display: block; }
[data-icona] { display: inline-flex; align-items: center; justify-content: center; }

:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--accento);
  outline-offset: 2px;
  border-radius: 6px;
}

.visivamente-nascosto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--accento); color: var(--su-accento);
  padding: 10px 14px; border-radius: var(--r-piccolo); text-decoration: none;
}
.salta:focus { top: 12px; }

/* ---------- Pulsanti ---------- */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  min-height: 40px; padding: 0.45em 1.05em;
  border: 1px solid var(--linea); border-radius: var(--r-pillola);
  background: var(--sup); color: var(--testo);
  font-weight: 500; font-size: var(--t-s); line-height: 1.1; text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
}
.bottone:hover { border-color: var(--testo-3); }
.bottone:active { transform: translateY(1px); }
.bottone.primario { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.bottone.primario:hover { background: var(--accento-2); border-color: var(--accento-2); }
.bottone.grande { min-height: 52px; padding: 0.6em 1.5em; font-size: var(--t-l); font-weight: 700; }
.bottone.testo { border-color: transparent; background: transparent; padding-left: 0.4em; padding-right: 0.6em; }
.bottone.testo:hover { background: var(--sup-2); }
.bottone.pericolo { color: #A3283A; }
.bottone[aria-pressed="true"] { background: var(--testo); border-color: var(--testo); color: var(--sup); }
.bottone:disabled { opacity: 0.5; cursor: not-allowed; }

.bottone-icona {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--linea); border-radius: var(--r-medio);
  background: var(--sup); color: var(--testo);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.bottone-icona:hover { background: var(--sup-2); }
.bottone-icona.piccolo { width: 34px; height: 34px; border-radius: 10px; }
.bottone-icona[aria-pressed="true"] { background: var(--testo); color: var(--sup); border-color: var(--testo); }
.bottone-icona:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Notifica ---------- */

.notifica {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--testo); color: var(--sup);
  padding: 10px 16px; border-radius: var(--r-medio);
  font-size: var(--t-s); box-shadow: var(--ombra);
  transition: opacity 0.25s, transform 0.25s;
  max-width: calc(100vw - 32px);
}
.notifica.visibile { opacity: 1; transform: translate(-50%, 0); }

@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; }
}