/* ============================================================
   LA TAVOLOZZA — una sola, per tutte le schermate.
   Musica, modalità auto e festa pescano da qui: cambiare una
   tinta qui la cambia dappertutto.

   Due temi: notte (quello di sempre) e giorno. Le tinte chiare
   NON sono le scure schiarite. Sul bianco il verde #4dff8f fa
   1,4 di contrasto — cioè non si legge — quindi in chiaro
   diventa un verde bosco che di contrasto ne fa 5,4, oltre il
   minimo 4,5 che serve a chi ha la vista stanca o il telefono
   in mano al sole.

   Il tema si sceglie col pallino ☀/☾ e resta in memoria.
   ============================================================ */

:root {
  /* --- fondi e superfici --- */
  --wm-fondo0: #131317;                   /* fondo pagina, in basso */
  --wm-fondo1: #1b1b22;                   /* fondo pagina, in alto */
  --wm-carta: #20202a;                    /* riquadri */
  --wm-carta-su: #262633;                 /* riquadri in rilievo, tasti */
  --wm-linea: rgba(255, 255, 255, .16);   /* bordi e divisori */
  --wm-velo: rgba(0, 0, 0, .28);          /* fondo dei riquadri interni */
  --wm-velo-forte: rgba(10, 10, 14, .94); /* tende a tutto schermo */

  /* --- inchiostri --- */
  --wm-testo: #f4f4f8;                    /* 14,7 sulla carta */
  --wm-muto: #b9b9c8;                     /* 8,3 — didascalie e aiuti */

  /* --- accenti --- */
  --wm-verde: #4dff8f;
  --wm-verde-lcd: #7bffab;
  --wm-oro: #ffc861;
  --wm-blu: #7ea6ff;
  --wm-viola: #d3a4ff;
  --wm-ok: #1db954;
  --wm-no: #ff7a6a;
  --wm-su-oro: #241a02;                   /* testo sopra il pieno oro */
  --wm-su-verde: #06210f;                 /* testo sopra il pieno verde */

  /* --- gli "schermi": il display del brano, l'orologio, la ricerca.
     Hanno vita propria perché imitano un apparecchio, e vanno tenuti
     insieme: se il verde cambia senza il fondo, non si legge più. --- */
  --wm-lcd-fondo: #0a0f0c;
  --wm-lcd-testo: #7bffab;              /* 15,4 sul fondo LCD */
  --wm-lcd-bordo: rgba(77, 255, 136, .16);
  --wm-traccia: #0d0d13;                /* binario della barra di avanzamento */

  --wm-ombra: 0 12px 34px rgba(0, 0, 0, .45);
  --wm-mono: "Share Tech Mono", "JetBrains Mono", Consolas, monospace;

  /* --- misure: una scala sola, così gli spazi vanno d'accordo --- */
  --sp1: .25rem; --sp2: .5rem; --sp3: .75rem; --sp4: 1rem; --sp5: 1.5rem;
  --raggio: 14px;
}

html[data-tema="chiaro"] {
  --wm-fondo0: #eceae3;
  --wm-fondo1: #f7f5f0;
  --wm-carta: #ffffff;
  --wm-carta-su: #f3f1ea;
  --wm-linea: rgba(30, 30, 40, .16);
  --wm-velo: rgba(30, 30, 40, .05);
  --wm-velo-forte: rgba(250, 249, 245, .96);

  --wm-testo: #1c1c22;        /* 17,0 sul bianco */
  --wm-muto: #5a5a66;         /* 6,8 sul bianco */

  --wm-verde: #0f7a3d;        /* 5,4 sul bianco */
  --wm-verde-lcd: #0b6a34;    /* 6,3 sul bianco */
  --wm-oro: #8a5a00;          /* 5,9 sul bianco */
  --wm-blu: #2b4fd0;          /* 6,7 sul bianco */
  --wm-viola: #8a2fb8;        /* 5,6 sul bianco */
  --wm-ok: #0f7a3d;
  --wm-no: #b3261e;
  --wm-su-oro: #ffffff;
  --wm-su-verde: #ffffff;

  /* di giorno anche gli schermi si accendono: verde bosco su menta
     chiara, 6,0 di contrasto. Il nero pieno in mezzo a una pagina
     bianca faceva macchia e stancava l'occhio. */
  --wm-lcd-fondo: #e8f4ec;
  --wm-lcd-testo: #0b6a34;
  --wm-lcd-bordo: rgba(15, 122, 61, .28);
  --wm-traccia: #dcdad3;

  --wm-ombra: 0 6px 18px rgba(30, 30, 40, .12);
}

/* il pallino sole/luna: piccolo, sempre nello stesso posto */
.tema-pallino {
  border: 1px solid var(--wm-linea) !important;
  background: var(--wm-carta-su) !important;
  color: var(--wm-testo) !important;
  border-radius: 999px !important;
  padding: .22rem .7rem !important;
  font-size: .95rem; line-height: 1.45; cursor: pointer;
  font-family: inherit;
}
.tema-pallino:hover { border-color: var(--wm-oro) !important; color: var(--wm-oro) !important; }

/* ---------- monitor grandi, fino al 4K ----------
   Tutta l'app è misurata in rem: alzando il corpo del testo di base su
   schermi molto larghi, l'intera interfaccia cresce in proporzione invece
   di restare minuscola in mezzo a un monitor 4K. Sta qui in tema.css così
   vale ovunque — pagina di login compresa, non solo dentro l'app. Le
   soglie sono in px, indipendenti dal corpo del testo. */
@media (min-width: 2000px) { html { font-size: 19px; } }
@media (min-width: 2600px) { html { font-size: 23px; } }
@media (min-width: 3400px) { html { font-size: 28px; } }