/**
 * I gettoni dell'identità di Turno.
 *
 * Tre strati, e l'ordine conta (`docs/IDENTITA.md`, § 5):
 *
 *   primitivo   il valore grezzo — «rame 600 è #B4643A», e basta
 *        ↓
 *   semantico   a cosa serve — «il primario è blu ardesia 700»
 *        ↓
 *   componente  l'eccezione di un pezzo solo — «il blocco dell'agenda»
 *
 * **Perché tre e non uno.** Il tema scuro cambia solo lo strato di mezzo: i
 * primitivi restano quelli, i componenti non sanno che è successo qualcosa. Con
 * un solo strato, passare al tema scuro vuol dire riscrivere ogni regola — che
 * è esattamente quello che c'era prima in `index.html`, venti colori scritti a
 * mano e due palette da tenere allineate a occhio.
 *
 * **Regola d'uso, unica:** in `index.html` non si scrive un colore. Si scrive
 * `var(--qualcosa)`. Se serve un valore che qui non c'è, si aggiunge qui.
 *
 * Niente build, niente Tailwind, niente dipendenze: è un file CSS che il
 * processo Node serve da `public/`, come tutto il resto del pannello.
 */

/* ==========================================================================
   1. PRIMITIVI — i valori grezzi. Si toccano quasi mai.
   ========================================================================== */

:root {
  /* --- Blu ardesia: il colore di Turno -----------------------------------
     Il verde di prima era un errore da correggere prima che diventasse
     l'identità: su un prodotto che vive dentro WhatsApp, il verde è il
     colore di WhatsApp. Un pannello verde sembra una schermata di WhatsApp,
     e il barbiere non capisce più dove finisce l'uno e comincia l'altro.
     L'ardesia è fredda, ferma e non somiglia a niente di quello che il
     cliente ha già sul telefono. */
  --ardesia-50:  #eef4f6;
  --ardesia-100: #d3e3e8;
  --ardesia-300: #7fa9b5;
  --ardesia-500: #34707f;
  --ardesia-600: #275a67;
  --ardesia-700: #1d4e5c;
  --ardesia-900: #12333c;

  /* --- Rame: il caldo che tiene lontano il registro «cruscotto» ----------
     Un gestionale tutto blu e grigio è un gestionale che sembra un
     software gestionale. Il rame è il metallo della bottega, e serve a
     ricordare che dall'altra parte c'è un negozio, non un ufficio. */
  --rame-300: #e0a081;
  --rame-500: #b4643a;
  --rame-700: #8a4826;

  /* --- Neutri caldi ------------------------------------------------------
     Caldi e non grigi: un grigio neutro sotto una luce al neon fa sembrare
     tutto una cartella clinica. Sono cugini del travertino di Salve — è
     voluto, sono due prodotti della stessa mano — ma non gli stessi. */
  --calce-50:  #faf9f7;
  --calce-100: #f5f3ef;
  --calce-200: #e8e5df;
  --calce-300: #d6d2ca;
  --calce-500: #8a857c;
  --calce-600: #6b6660;
  --calce-800: #302e2b;
  --calce-900: #1b1a18;
  --calce-950: #131211;

  /* --- Mattone: quando qualcosa non si può fare -------------------------- */
  --mattone-400: #e0715e;
  --mattone-600: #a33a2a;

  /* --- Verde bosco: solo per «è collegato» ------------------------------
     Il verde resta, ma torna a fare una cosa sola: dire che una spia è
     accesa. Non è più il colore del prodotto, è il colore di uno stato. */
  --bosco-400: #4bb583;
  --bosco-600: #1f6f4a;

  --bianco: #ffffff;

  /* --- Spazio: passo da 4, come tutto il resto --------------------------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;

  /* --- Corpo del testo ---------------------------------------------------
     Scala stretta di proposito. Un pannello con sette grandezze diverse è
     un pannello in cui non si capisce cosa viene prima. */
  --testo-xs: .76rem;
  --testo-sm: .84rem;
  --testo-base: .95rem;
  --testo-md: 1rem;
  --testo-lg: 1.2rem;

  --peso-normale: 400;
  --peso-medio: 550;
  --peso-forte: 650;

  --interlinea-stretta: 1.25;
  --interlinea: 1.5;

  /* --- Raggi e ombre ----------------------------------------------------- */
  --raggio-sm: .35rem;
  --raggio: .45rem;
  --raggio-lg: .7rem;
  --raggio-tondo: 999px;

  --ombra-sm: 0 1px 2px rgb(0 0 0 / .06);
  --ombra: 0 2px 8px rgb(0 0 0 / .10);
  --ombra-lg: 0 8px 28px rgb(0 0 0 / .18);

  --bordo-sottile: 1px;
  --bordo-marcato: 2px;

  /* --- Caratteri ---------------------------------------------------------
     Quelli di sistema, e non è pigrizia: un carattere che arriva dalla rete
     è una richiesta in più prima che il barbiere veda l'agenda, e una
     schermata bianca se la rete del negozio fa i capricci. Il pannello si
     apre trenta volte al giorno; deve aprirsi subito. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeri: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ==========================================================================
   2. SEMANTICI — a cosa serve un colore. È lo strato che cambia col tema.
   ========================================================================== */

:root {
  --sfondo: var(--calce-100);
  --superficie: var(--bianco);
  --superficie-alta: var(--calce-50);
  --bordo: var(--calce-200);
  --bordo-tenue: var(--calce-100);

  --testo: var(--calce-900);
  --testo-tenue: var(--calce-600);
  --testo-su-primario: var(--bianco);

  --primario: var(--ardesia-700);
  --primario-sopra: var(--ardesia-600);   /* passandoci sopra */
  --primario-premuto: var(--ardesia-900);
  --primario-tenue: var(--ardesia-50);    /* fondi, riempimenti */
  --primario-bordo: var(--ardesia-300);

  --accento: var(--rame-500);
  --accento-tenue: var(--rame-300);

  --guasto: var(--mattone-600);
  --guasto-tenue: var(--mattone-400);
  --acceso: var(--bosco-600);             /* «collegato», e nient'altro */

  --anello-fuoco: var(--ardesia-500);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: var(--calce-950);
    --superficie: var(--calce-900);
    --superficie-alta: var(--calce-800);
    --bordo: #33302c;
    --bordo-tenue: #26241f;

    --testo: var(--calce-100);
    --testo-tenue: var(--calce-500);

    /* Al buio il blu profondo sparisce e il rosso scuro diventa illeggibile:
       lo strato semantico punta ai gradini chiari degli stessi primitivi. È
       tutto quello che il tema scuro deve cambiare. */
    --primario: var(--ardesia-300);
    --primario-sopra: var(--ardesia-100);
    --primario-premuto: var(--ardesia-500);
    --primario-tenue: #16323a;
    --primario-bordo: var(--ardesia-500);
    --testo-su-primario: var(--calce-950);

    --accento: var(--rame-300);
    --guasto: var(--mattone-400);
    --acceso: var(--bosco-400);
  }
}

/* ==========================================================================
   3. COMPONENTE — l'eccezione di un pezzo solo, quando serve davvero.
   ========================================================================== */

:root {
  /* Il blocco di un appuntamento nella scheda Oggi. Ha gettoni suoi perché è
     l'unico elemento che si disegna centinaia di volte in una schermata, e
     perché la sua altezza dipende da un conto e non da una scelta. */
  --appuntamento-sfondo: var(--primario-tenue);
  --appuntamento-segno: var(--primario);
  --appuntamento-testo: var(--testo);
  --appuntamento-disdetto-opacita: .45;
  --appuntamento-no-show-segno: var(--guasto);
  --appuntamento-corpo: var(--testo-xs);

  /* Un'ora della griglia. Sotto i 50px due appuntamenti attaccati non si
     leggono: è una misura provata sul telefono, non una preferenza. */
  --agenda-ora-altezza: 56px;
  --agenda-colonna-minima: 7rem;
  --agenda-riga: var(--bordo-tenue);

  --pulsante-raggio: var(--raggio);
  --pulsante-spazio: var(--sp-2) var(--sp-4);

  --campo-sfondo: var(--sfondo);
  --campo-bordo: var(--bordo);
  --campo-raggio: var(--raggio-sm);
  --campo-spazio: var(--sp-2) var(--sp-3);

  --scheda-raggio: var(--raggio-lg);
  --scheda-spazio: var(--sp-4);

  --dialogo-larghezza: 24rem;
  --dialogo-velo: rgb(0 0 0 / .45);
}