/* Fondamenta: token, reset, tipografia.
   La stella polare sta qui dentro. Ogni colore, spaziatura e raggio
   usato altrove viene da una variabile: e' quello che permette al
   foglio di stampa di ribaltare la pagina senza riscrivere niente. */

:root {
  /* superfici */
  --fondo: #0B0B0D;
  --card: #1A1A1E;
  --card-bordo: rgba(255, 255, 255, 0.07);
  --vetro: rgba(22, 22, 26, 0.55);
  --vetro-bordo: rgba(255, 255, 255, 0.10);
  --vetro-ombra: 0 24px 60px rgba(0, 0, 0, 0.50);
  --pod: rgba(255, 255, 255, 0.05);
  --riga: rgba(255, 255, 255, 0.06);
  --griglia: rgba(255, 255, 255, 0.04);

  /* testo: la gerarchia si fa con l'opacita', non col grassetto */
  --testo: rgba(255, 255, 255, 0.92);
  --testo-2: rgba(255, 255, 255, 0.55);
  --testo-3: rgba(255, 255, 255, 0.40);
  --testo-4: rgba(255, 255, 255, 0.25);
  /* le label micro hanno il loro grigio, ~45%: piu' basso e
     sparirebbero, piu' alto competerebbero con i numeri */
  --label: rgba(255, 255, 255, 0.45);
  /* la coda del numero hero: attenuata, ma sopra la soglia di
     leggibilita' - si misura, non si giudica a occhio */
  --coda: rgba(255, 255, 255, 0.38);
  --bianco-tenue: rgba(255, 255, 255, 0.04);
  --bianco-tenue-2: rgba(255, 255, 255, 0.06);
  --contrario: #FFFFFF;        /* il colore che "vince" sul fondo */
  --su-contrario: #0B0B0D;     /* e il testo che ci sta sopra */
  --bordo-forte: rgba(255, 255, 255, 0.16);
  --barra-fondo: rgba(11, 11, 13, 0.86);
  --tratto-dato: rgba(255, 255, 255, 0.35);
  --errore-fondo: rgba(255, 69, 58, 0.10);
  --errore-bordo: rgba(255, 69, 58, 0.30);
  --errore-testo: #FFB4AE;
  --fatto-fondo: rgba(52, 199, 89, 0.10);
  --fatto-bordo: rgba(52, 199, 89, 0.30);
  --fatto-testo: #9BE7B0;

  /* un solo accento */
  --ambra: #E8963C;
  --ambra-tenue: rgba(232, 150, 60, 0.16);

  /* verde e rosso SOLO semantici, sul segno dei numeri */
  --verde: #34C759;
  --rosso: #FF453A;

  /* raggi generosi */
  --r-card: 18px;
  --r-vetro: 18px;
  --r-pod: 13px;
  --r-pill: 999px;

  /* spaziature */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --larghezza: 1280px;
  color-scheme: dark;
}

/* --- tema chiaro ----------------------------------------------------
   NON e' lo scuro rovesciato: e' un tema disegnato, con le stesse
   regole premium. Carta quasi bianca invece del bianco puro (il bianco
   pieno su uno schermo grande stanca e appiattisce le card), card
   bianche che si staccano dalla carta, ambra piu' profonda perche' sul
   chiaro l'ambra da schermo scuro sbiadisce, e verde/rosso ancora solo
   semantici. La gerarchia resta fatta di dimensione e opacita'. */
:root[data-tema="chiaro"] {
  --fondo: #F2F2F0;
  --card: #FFFFFF;
  --card-bordo: rgba(17, 17, 20, 0.09);
  /* il vetro sul chiaro non e' scuro velato: e' bianco velato, con
     un'ombra molto piu' leggera - sul chiaro un'ombra forte sporca */
  --vetro: rgba(255, 255, 255, 0.72);
  --vetro-bordo: rgba(17, 17, 20, 0.08);
  --vetro-ombra: 0 18px 44px rgba(17, 17, 20, 0.10);
  --pod: rgba(17, 17, 20, 0.04);
  --riga: rgba(17, 17, 20, 0.09);
  --griglia: rgba(17, 17, 20, 0.07);

  --testo: rgba(17, 17, 20, 0.92);
  --testo-2: rgba(17, 17, 20, 0.62);
  --testo-3: rgba(17, 17, 20, 0.48);
  --testo-4: rgba(17, 17, 20, 0.32);
  --label: rgba(17, 17, 20, 0.50);
  /* 0,50 e non 0,45: sul chiaro la coda che sta FUORI da una card, sul
     fondo carta, scendeva a 2,97 di contrasto. La regola ora e' "piu'
     attenuata del numero e sopra soglia", e cosi' torna a 3,8. */
  --coda: rgba(17, 17, 20, 0.50);

  --ambra: #B9660F;
  --ambra-tenue: rgba(185, 102, 15, 0.12);
  --verde: #1E7B36;
  --rosso: #C02A20;

  --bianco-tenue: rgba(17, 17, 20, 0.035);
  --bianco-tenue-2: rgba(17, 17, 20, 0.05);
  --contrario: #16161A;
  --su-contrario: #FFFFFF;
  --bordo-forte: rgba(17, 17, 20, 0.20);
  --barra-fondo: rgba(242, 242, 240, 0.88);
  --tratto-dato: rgba(17, 17, 20, 0.38);
  --errore-fondo: rgba(192, 42, 32, 0.08);
  --errore-bordo: rgba(192, 42, 32, 0.28);
  --errore-testo: #8E1F17;
  --fatto-fondo: rgba(30, 123, 54, 0.08);
  --fatto-bordo: rgba(30, 123, 54, 0.28);
  --fatto-testo: #145725;
  color-scheme: light;
}

@font-face {
  font-family: "InterVar";
  src: url("../caratteri/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--testo);
}

body {
  font-family: "InterVar", "Inter", -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* cifre tabellari OVUNQUE: le colonne di numeri devono incolonnarsi */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
}

h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; color: var(--testo-2); }
p { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, select {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/* --- mattoni tipografici ------------------------------------------ */

/* label micro uppercase con tracking largo */
.micro {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--label);
  font-weight: 400;
}

.tenue { color: var(--testo-2); }
.tenue-2 { color: var(--testo-3); }
.tenue-3 { color: var(--testo-4); }

/* numero hero: grande, peso regolare, coda attenuata */
/* Il numero e' il protagonista, l'unita' quasi sparisce.
   Il salto di scala fra numero e coda dev'essere EVIDENTE: e' la cosa
   che piu' di ogni altra separa una dashboard premium da una fatta
   bene. Coda a un terzo, al 38% di opacita'. */
.hero {
  font-size: 64px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.0;
  white-space: nowrap;
}
.hero .coda {
  font-size: 0.34em;
  color: var(--coda);
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 0.06em;
}
.hero-24 { font-size: 24px; letter-spacing: -0.012em; }
.hero-28 { font-size: 28px; letter-spacing: -0.015em; }
.hero-32 { font-size: 32px; }
.hero-40 { font-size: 40px; }
.hero-48 { font-size: 48px; }
.hero-64 { font-size: 64px; }
.hero-80 { font-size: 80px; }

/* il segno: verde e rosso solo qui */
.positivo { color: var(--verde); }
.negativo { color: var(--rosso); }

.ambra { color: var(--ambra); }

/* --- accessibilita' minima ---------------------------------------- */
:focus-visible {
  outline: 1.5px solid var(--ambra);
  outline-offset: 2px;
}

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