/* W.U.K.U. — tema
   Stesse misure e stessi caratteri di N.U.K.U.: chi passa da una all'altra
   deve sentirsi a casa. Cambia l'accento — magenta invece del blu — e i
   colori che qui vogliono dire qualcosa: verde quello che entra, rosso
   quello che esce, viola quello che si mette da parte. */

@font-face { font-family:"Space Grotesk"; font-weight:500; font-display:swap; src:url("../caratteri/space-grotesk-latin-500-normal.woff2") format("woff2") }
@font-face { font-family:"Space Grotesk"; font-weight:700; font-display:swap; src:url("../caratteri/space-grotesk-latin-700-normal.woff2") format("woff2") }
@font-face { font-family:"IBM Plex Sans"; font-weight:400; font-display:swap; src:url("../caratteri/ibm-plex-sans-latin-400-normal.woff2") format("woff2") }
@font-face { font-family:"IBM Plex Sans"; font-weight:500; font-display:swap; src:url("../caratteri/ibm-plex-sans-latin-500-normal.woff2") format("woff2") }
@font-face { font-family:"IBM Plex Sans"; font-weight:600; font-display:swap; src:url("../caratteri/ibm-plex-sans-latin-600-normal.woff2") format("woff2") }

:root {
  /* Lo slot dell'accento si chiama --acc in tutta la famiglia. */
  --acc: #E24C86;
  --acc-scuro: #B93264;
  --acc-tenue: rgba(226, 76, 134, .16);

  --verde: #4FB477;   /* quello che entra */
  --rosso: #E2685F;   /* quello che esce */
  --viola: #9B6BF0;   /* quello che si mette da parte */
  --ambra: #E8890C;

  --numeri: "Space Grotesk", system-ui, sans-serif;
  --testo: "IBM Plex Sans", system-ui, sans-serif;

  --r-piccolo: 8px;
  --r-medio: 14px;
  --r-grande: 22px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --barra-alt: 60px;
}

[data-tema="scuro"] {
  --fondo: #0E1116;
  --fondo-2: #171C24;
  --fondo-3: #212934;
  --bordo: #2B333F;
  --inchiostro: #EDF1F7;
  --inchiostro-2: #98A3B3;
  --ombra: 0 12px 32px rgba(0, 0, 0, .5);
}

[data-tema="chiaro"] {
  --fondo: #F7F8FA;
  --fondo-2: #FFFFFF;
  --fondo-3: #ECEFF4;
  --bordo: #D8DEE7;
  --inchiostro: #141922;
  --inchiostro-2: #5C6675;
  --ombra: 0 12px 32px rgba(20, 25, 34, .12);
}