/* I colori e le misure dell'app: lo stile "video" del mock (docs/mock).
   Il tema segue il sistema; data-tema="chiaro" | "scuro" su <html> lo forza
   (Piano › Tema). Ogni colore sta qui: i componenti usano solo le variabili. */
:root {
  --bg: #ffffff;
  --bg-2: #f6f7f9;
  --card: #ffffff;
  --card-sel: #eef5ff;
  --testo: #15151a;
  --testo-2: #6b6b76;
  --testo-3: #9a9aa4;
  --bordo: #e6e6ec;
  --accento: #1d6fe0;
  --accento-testo: #ffffff;
  --accento-tenue: #e8f1fd;
  --verde: #3b6d11;
  --verde-tenue: #edf5e4;
  --ambra: #9a6200;
  --ambra-tenue: #fdf3e0;
  --rosso: #c0322b;
  --rosso-tenue: #fdecea;
  --mattina: #d39a12;
  --pomeriggio: #3c7fc9;
  --pista: #eceef3;
  --ombra: 0 1px 2px rgba(20, 20, 40, .06), 0 4px 14px rgba(20, 20, 40, .07);
  --ombra-barra: 0 -1px 0 rgba(20, 20, 40, .06);
  --vetro: rgba(255, 255, 255, .86);

  --raggio: 16px;
  --raggio-piccolo: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-titolo: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --tocco: 44px;
  --margine: 20px;
  --larghezza-colonna: 560px;
  --barra-h: 56px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --bg: #121216;
    --bg-2: #18181d;
    --card: #1c1c22;
    --card-sel: #17304f;
    --testo: #f3f3f6;
    --testo-2: #a3a3ad;
    --testo-3: #74747e;
    --bordo: #2c2c35;
    --accento: #5a9cf5;
    --accento-testo: #0b1526;
    --accento-tenue: #182a44;
    --verde: #8fc35a;
    --verde-tenue: #1d2a14;
    --ambra: #e0a845;
    --ambra-tenue: #2e2412;
    --rosso: #f0776f;
    --rosso-tenue: #33191a;
    --mattina: #e6b440;
    --pomeriggio: #6aa6e8;
    --pista: #26262e;
    --ombra: 0 1px 2px rgba(0, 0, 0, .4);
    --ombra-barra: 0 -1px 0 rgba(255, 255, 255, .06);
    --vetro: rgba(24, 24, 29, .86);
    color-scheme: dark;
  }
}

:root[data-tema="scuro"] {
  --bg: #121216;
  --bg-2: #18181d;
  --card: #1c1c22;
  --card-sel: #17304f;
  --testo: #f3f3f6;
  --testo-2: #a3a3ad;
  --testo-3: #74747e;
  --bordo: #2c2c35;
  --accento: #5a9cf5;
  --accento-testo: #0b1526;
  --accento-tenue: #182a44;
  --verde: #8fc35a;
  --verde-tenue: #1d2a14;
  --ambra: #e0a845;
  --ambra-tenue: #2e2412;
  --rosso: #f0776f;
  --rosso-tenue: #33191a;
  --mattina: #e6b440;
  --pomeriggio: #6aa6e8;
  --pista: #26262e;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4);
  --ombra-barra: 0 -1px 0 rgba(255, 255, 255, .06);
  --vetro: rgba(24, 24, 29, .86);
  color-scheme: dark;
}