/*
 * PALETTE — l'unico posto dove vivono i colori del sito.
 *
 * Cinque colori, e basta. Per cambiarne uno si tocca SOLO il blocco qui
 * sotto: tutto il resto (pagina, celle, grafico SVG, tooltip, badge) li
 * legge da qui, anche il JavaScript, che non contiene nessun colore.
 *
 * Le tinte intermedie (testo secondario, fondo degli spazi pubblicitari,
 * cella al passaggio del mouse) NON sono colori nuovi: sono mescolanze
 * dei cinque, cosi' seguono da sole qualunque cambio di palette.
 */
:root {
  --c-light:  #F4F1E1;
  --c-dark:   #231F12;
  --c-green:  #6AAB5D;
  --c-red:    #CB373B;
  --c-accent: #D6B42B;   /* selezione: testo, celle, linee di History, pulsanti di reset */
}

/* Ruoli: cosa usa quale colore. Si cambia qui se un ruolo cambia colore. */
:root {
  --bg:         var(--c-dark);
  --fg:         var(--c-light);
  --fg-muted:   color-mix(in srgb, var(--c-light) 50%, var(--c-dark));
  --rule:       var(--c-light);

  --cell:       var(--c-light);
  --cell-hover: color-mix(in srgb, var(--c-light) 86%, var(--c-dark));
  --cell-fg:    var(--c-dark);
  --cell-fg-muted: color-mix(in srgb, var(--c-dark) 62%, var(--c-light));
  --group-line: var(--c-light);

  --up:         var(--c-green);
  --down:       var(--c-red);

  --ad-fill:    color-mix(in srgb, var(--c-light) 18%, var(--c-dark));

  --selection:    var(--c-accent);
  --selection-fg: var(--c-dark);

  /* L'accento segna anche i pulsanti per tornare indietro (Reset view,
   * Clear selection): contorno e testo, su fondo scuro. */
  --reset-line: var(--c-accent);

  /* Selezione: celle selezionate di Usage e bordo delle loro schede. */
  --sel: var(--c-accent);

  --frame: var(--c-light);   /* cornice del grafico */

  /* History */
  --line:      var(--c-light);                                  /* linee del bump chart */
  --line-hot:  var(--c-accent);                                 /* linea evidenziata */
  --grid:      color-mix(in srgb, var(--c-light) 28%, var(--c-dark));
}

/*
 * TIPOGRAFIA
 *
 * La tavola del design e' 2560 px a 1x: titolo 30, barra dati 20, nomi
 * nelle celle 30, valori 20. Ridotta in proporzione su un portatile la
 * barra dati scenderebbe a 11 px, quindi le misure scalano con la
 * larghezza ma con un minimo sotto cui non scendono.
 */
/* I font stanno sul sito, non su Google: caricandoli da fonts.googleapis.com
 * l'indirizzo IP di ogni visitatore arrivava a Google, e in Europa questo
 * richiede il consenso. Tre pesi, gli stessi del design system. */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/JetBrainsMono-Light.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); }

:root {
  /* Un solo carattere per tutto il sito, lo stesso del logo. I due nomi
   * restano perche' i ruoli sono diversi: --font-sans e' il testo,
   * --font-mono i badge e le scritte tecniche. Se un giorno il testo
   * cambia carattere, si cambia solo --font-sans (e la famiglia in textW
   * di app.js, che misura le etichette). */
  --font-sans: "JetBrains Mono", ui-monospace, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-title:   clamp(20px, 1.17vw, 30px);

  /* Testi dell'interfaccia fuori dal grafico: sottotitolo, barra dei dati,
   * ricerca, selettori, pulsanti, note, legenda e piede. Un'unica misura,
   * mai sotto i 15 px: a 12-13 px erano troppo piccoli. I testi dentro le
   * celle, le schede e i tooltip dei modelli hanno misure proprie. */
  --fs-ui:      clamp(15px, 0.6vw, 18px);
  --fs-tagline: var(--fs-ui);
  --fs-bar:     var(--fs-ui);
  --fs-toggle:  var(--fs-ui);
  --fs-group:   clamp(13px, 0.86vw, 22px);

  /* Letti anche dal JavaScript per misurare le etichette delle celle. */
  --fs-cell-head: clamp(15px, 1.02vw, 30px);
  --fs-cell-body: clamp(12px, 0.70vw, 20px);
  --fs-badge:     clamp(9px, 0.47vw, 12px);

  /* Geometria del grafico, anch'essa letta dal JavaScript. */
  --cell-radius: clamp(12px, 0.94vw, 24px);
  --cell-gap:    clamp(5px, 0.31vw, 8px);
  --group-gap:   clamp(12px, 0.70vw, 18px);
  --group-pad:   clamp(8px, 0.74vw, 19px);   /* contorno → celle: ospita l'etichetta */

  --page-pad: clamp(16px, 1.17vw, 30px);

  --fs-hist-label: clamp(11px, 0.72vw, 18px);
  --fs-axis:       clamp(10px, 0.6vw, 15px);

  --frame-width:  2px;
  --frame-radius: clamp(14px, 1.1vw, 28px);
  --frame-pad:    clamp(8px, 0.6vw, 16px);
}

/* Telefono: le misure di prima. I 15 px servono sul desktop, dove i testi
 * piccoli sembravano minuscoli; su uno schermo stretto toglierebbero spazio
 * (la ricerca accanto al selettore si riduceva a «Search mod…»). */
@media (max-width: 767px) {
  :root {
    --fs-ui:      13px;   /* barra dei dati, ricerca, legenda, piede */
    --fs-tagline: 12px;   /* sottotitolo, note sotto i grafici */
    --fs-toggle:  11px;   /* selettori, pulsanti di reset */
  }
}

::selection {
  background: var(--selection);
  color: var(--selection-fg);
}