/* SERALBA · token di design (vedi DESIGN.md). Nessun colore scritto a mano fuori da qui. */

@font-face { font-family: "Archivo"; src: url("../font/archivo-var.woff2") format("woff2"), url("../font/Archivo-var.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("../font/ArchivoExpanded-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../font/GeistMono-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* palette del marchio */
  --avorio: #F3F0E1; --nero: #0C0A07; /* nero caldo a schermo (15/10); il nero di stampa resta #050505 */ --inchiostro: #2E2F2F; --crema: #E9E3D0;
  --rosso: #E3141B; --oro: #D9B66E;
  --linea-giorno: #CCC8BA; --linea-giorno-2: #8E887A; --linea-notte: #55534E; --linea-notte-2: #8F8B80;
  --crepuscolo: #1B1A1F;

  /* tema unico: scuro (deciso il 5/10) */
  --fondo: var(--nero); --testo: var(--crema); --linea: var(--linea-notte); --linea-2: var(--linea-notte-2);
  --marchio-url: url("../marchio/SERALBA_marchio_crema.svg");

  /* caratteri: due famiglie, nessun serif (scartato il 5/10) */
  --f-titoli: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --f-testo: "Archivo", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;
  --peso-testo: 430;   /* chiaro su scuro: un filo più di peso e di interlinea rendono il testo più leggibile */

  /* scala */
  --t-13: 0.8125rem; --t-16: 1rem; --t-19: 1.1875rem; --t-24: 1.5rem; --t-40: 2.5rem; --t-72: 4.5rem; --t-128: 8rem;
  --t-fluido: clamp(3rem, 11vw, 12rem);
  --misura: 64ch;

  /* spazio */
  --u: 8px; --margine: 16px; --max: 1440px;

  /* movimento: durate brevi per l'interfaccia, lunghe solo per i momenti d'autore */
  --t-veloce: 150ms; --t-pressione: 160ms; --t-media: 300ms; --t-lenta: 700ms;
  --ease: cubic-bezier(.2,.7,.2,1);                 /* passaggi di colore e di stato */
  --ease-forte: cubic-bezier(.23,1,.32,1);           /* ingressi e uscite: parte subito, si posa piano */
  --ease-dentro-fuori: cubic-bezier(.77,0,.175,1);   /* cose che si spostano restando in scena (il sole che torna) */

  /* superfici del browser, dalla palette */
  caret-color: var(--rosso);
  accent-color: var(--rosso);
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --margine: 32px; } }
@media (min-width: 1100px) { :root { --margine: 64px; } }

/* le fasi del giorno (data-fase) muovono sole e orario, non i colori: il sito è scuro sempre */
html[data-tema="notte"]  { --fondo: var(--nero);   --testo: var(--crema);      --linea: var(--linea-notte); --linea-2: var(--linea-notte-2); --marchio-url: url("../marchio/SERALBA_marchio_crema.svg"); }

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fondo); color: var(--testo); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-testo); font-weight: var(--peso-testo); font-size: var(--t-19); line-height: 1.5; -webkit-font-smoothing: antialiased; background: transparent; color: var(--testo); }   /* il fondo lo dà html: così può virare al chiaro (15/10) */
h1, h2, h3 { font-family: var(--f-titoli); font-weight: 500; margin: 0; line-height: 1; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: var(--rosso); color: var(--avorio); }

/* il fuoco da tastiera: visibile, dalla palette, mai il blu del browser */
:focus-visible { outline: 1px solid var(--crema); outline-offset: 4px; }
html.giorno :focus-visible, [data-tono="alba"] :focus-visible { outline-color: var(--inchiostro); }
:focus:not(:focus-visible) { outline: none; }

/* la grana: un livello fisso, mai animato. Rumore chiaro a bassa opacità (un rumore nero sul nero non si vedrebbe). */
.grana { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .91  0 0 0 0 .89  0 0 0 0 .82  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }


.vis-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* micro-righe negli angoli: dati, orari, numeri */
.micro { font-family: var(--f-mono); font-weight: 400; font-size: var(--t-13); letter-spacing: .04em; text-transform: uppercase; line-height: 1.35; font-variant-numeric: tabular-nums; }
.micro b { font-weight: 500; color: var(--rosso); }

/* bottone: rettangolo, bordo 1 px, maiuscolo spaziato. Risponde alla pressione (scala .97, 160 ms). */
.btn { display: inline-flex; align-items: center; gap: 1em; padding: .95em 1.4em; border: 1px solid currentColor; font-family: var(--f-titoli); font-weight: 500; font-size: var(--t-13); letter-spacing: .12em; text-transform: uppercase; transition: background var(--t-veloce) var(--ease), color var(--t-veloce) var(--ease), border-color var(--t-veloce) var(--ease), transform var(--t-pressione) var(--ease-forte); }
.btn:hover { background: var(--testo); color: var(--fondo); }
.btn:not(.btn--spento):active { transform: scale(.97); }
.btn--pieno { background: var(--testo); color: var(--fondo); }
.btn--pieno:hover { background: var(--rosso); color: var(--avorio); border-color: var(--rosso); }

/* meno movimento, non zero: restano le dissolvenze brevi, spariscono spostamenti, scene e scorrimento legato */
@media (prefers-reduced-motion: reduce) {
  :root { --t-veloce: 120ms; --t-pressione: 0ms; --t-media: 200ms; --t-lenta: 240ms; }
  .btn:not(.btn--spento):active { transform: none; }
}