/* ===========================================================================
   I TUOI COLORI
   ---------------------------------------------------------------------------
   QUESTO FILE SI MODIFICA DIRETTAMENTE SULL'HOSTING.

   Lo trovi nel Gestore File, dentro:  squadra-app / pubblico / personalizza.css
   Lo apri con "Modifica", cambi un colore, salvi, ricarichi la pagina nel
   browser: la modifica si vede subito. Non serve ricompilare niente e non
   serve riavviare l'applicazione dal pannello.

   Ogni riga qui sotto cambia un colore in TUTTA la piattaforma: cambi un
   valore e tutti i pulsanti (o tutti gli sfondi) cambiano insieme.

   COME SI SCRIVE UN COLORE
     #0071e3   ← cancelletto + 6 caratteri.
   Per trovare il codice del tuo colore: cerca su internet "color picker",
   scegli il colore e copia il codice che comincia con #.

   ATTENZIONE
   - le righe che cominciano con una barra e un asterisco sono spiegazioni,
     non comandi: puoi cancellarle senza fare danni;
   - ogni riga di colore finisce con il punto e virgola;
   - se qualcosa smette di funzionare, hai quasi sicuramente cancellato una
     parentesi graffa o un punto e virgola.
   =========================================================================== */

/* Il doppio :root:root non è un errore di scrittura: serve a far vincere
   questi valori su quelli di partenza, qualunque sia l'ordine di caricamento. */
:root:root {

  /* -----------------------------------------------------------------------
     1. IL COLORE PRINCIPALE
     È il colore dei pulsanti, dei link e della voce di menù selezionata.
     È IL colore del tuo marchio: se ne cambi uno solo, cambia questo.
     ----------------------------------------------------------------------- */
  --accento: #0071e3;

  /* Una versione più scura, per le scritte colorate su fondo chiaro.
     Prendi il colore sopra e rendilo più scuro di due o tre gradini. */
  --accento-scuro: #0059b3;

  /* Lo stesso colore ma trasparente, usato per gli sfondi leggeri.
     Il formato è: rosso, verde, blu, quanto è visibile (da 0 a 1).
     Se cambi il colore principale, cambia anche questi tre numeri. */
  --accento-tenue: rgba(0, 113, 227, 0.1);


  /* -----------------------------------------------------------------------
     1b. IL QUADRATINO DEL LOGO
     È il quadratino colorato con dentro la lettera (o il tuo logo).
     Sono due colori perché sfuma da uno all'altro: mettine due simili.
     Se metti un logo tuo con sfondo suo, puoi ignorare questa parte.
     ----------------------------------------------------------------------- */
  --logo-1: #0a84ff;   /* colore in alto a sinistra */
  --logo-2: #0055d4;   /* colore in basso a destra */

  /* L'ombra sotto il quadratino: stesso colore, molto trasparente. */
  --logo-ombra: rgba(0, 90, 200, 0.3);

  /* L'alone colorato in cima alla schermata di accesso. */
  --alone-accesso: rgba(10, 132, 255, 0.09);


  /* -----------------------------------------------------------------------
     2. GLI SFONDI
     ----------------------------------------------------------------------- */

  /* Lo sfondo generale di tutte le pagine (il grigio chiarissimo). */
  --sfondo: #f5f5f7;

  /* Il colore dei riquadri bianchi appoggiati sullo sfondo. */
  --superficie: #ffffff;


  /* -----------------------------------------------------------------------
     3. I TESTI
     ----------------------------------------------------------------------- */

  /* Il colore dei titoli e del testo importante. */
  --testo: #1d1d1f;

  /* Il colore delle scritte secondarie, quelle grigie più piccole. */
  --testo-2: #6e6e73;


  /* -----------------------------------------------------------------------
     4. I COLORI CHE PARLANO
     Questi tre non sono decorazione: dicono una cosa precisa all'utente.
     Cambiali solo se hai un motivo, e mantieni il significato.
     ----------------------------------------------------------------------- */

  --rosso: #d9342b;      /* urgente, scaduto, errore */
  --arancio: #c2570a;    /* in corso, in scadenza */
  --verde: #1d8a4e;      /* completato, firmato, tutto bene */


  /* -----------------------------------------------------------------------
     5. GLI ANGOLI ARROTONDATI
     Numeri piccoli = angoli più squadrati e severi.
     Numeri grandi = angoli più morbidi.
     ----------------------------------------------------------------------- */

  --r-s: 8px;    /* piccoli: caselle di testo */
  --r-m: 12px;   /* medi */
  --r-l: 18px;   /* grandi: i riquadri bianchi */
  --r-xl: 24px;  /* enormi: le finestre che si aprono */


  /* -----------------------------------------------------------------------
     6. IL CARATTERE (font)
     Adesso usa il carattere di sistema: su Mac e iPhone si vede come le app
     di Apple, su Windows come le app di Windows. È leggero e non va scaricato.

     Se vuoi un carattere tuo, aggiungi il suo nome per PRIMO nell'elenco.
     ----------------------------------------------------------------------- */

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Inter,
    Roboto, Helvetica, Arial, sans-serif;
}


/* ===========================================================================
   ESEMPI GIÀ PRONTI

   Non attivarli: sono qui solo per farti vedere delle combinazioni che
   funzionano. Per usarne uno, copia i tre valori del blocco che ti piace e
   incollali al posto dei tre valori corrispondenti nella sezione 1 qui sopra.
   =========================================================================== */

/* --- VERDE PROFESSIONALE ---------------------------------------------------
:root {
  --accento: #1d8a4e;
  --accento-scuro: #14663a;
  --accento-tenue: rgba(29, 138, 78, 0.1);
}
--------------------------------------------------------------------------- */

/* --- ARANCIONE ARTIGIANALE -------------------------------------------------
:root {
  --accento: #e2660a;
  --accento-scuro: #b34f06;
  --accento-tenue: rgba(226, 102, 10, 0.1);
}
--------------------------------------------------------------------------- */

/* --- BLU SCURO ISTITUZIONALE -----------------------------------------------
:root {
  --accento: #1e3a5f;
  --accento-scuro: #142942;
  --accento-tenue: rgba(30, 58, 95, 0.1);
}
--------------------------------------------------------------------------- */

/* --- GRAFITE (senza colore) ------------------------------------------------
:root {
  --accento: #333336;
  --accento-scuro: #1d1d1f;
  --accento-tenue: rgba(51, 51, 54, 0.08);
}
--------------------------------------------------------------------------- */