/* ===========================================================================
   I COLORI DEL SITO, TUTTI QUI DENTRO
   ===========================================================================

   Questo file esiste per una ragione sola: avere un unico posto dove mettere
   le mani sui colori. Per rifare il sito con un'altra tinta - o per clonare
   il tema per un'altra agenzia - si copia la cartella del tema e si cambiano
   i valori qui sotto, senza andare a cercare dentro le migliaia di righe
   degli altri fogli di stile.

   Come funziona
   -------------
   I colori non sono scritti direttamente nelle regole: sono variabili, e le
   regole del tema le richiamano con var(--ip-qualcosa). Cambiando il valore
   qui, cambia ovunque quel colore sia usato.

   Le stesse variabili sono definite anche dentro template_immobiliare_1.css,
   che e' il foglio del template e non va modificato. Questo file viene
   caricato DOPO quello, quindi i valori scritti qui hanno la meglio: si
   governa il colore senza toccare il file del template.

   ATTENZIONE ALL'ORDINE: se un giorno si cambia l'ordine dei fogli di stile
   in partials/head.php, questo deve restare l'ultimo, altrimenti i valori
   del template tornano a comandare.

   Si modifica dal pannello
   ------------------------
   Backend > Colori del sito. Salvando, il pannello riscrive questo file: le
   note qui sopra restano, i valori vengono aggiornati. Si puo' comunque
   modificare a mano, con un qualsiasi editor di testo.

   =========================================================================== */

:root {
    /* --- I due colori del marchio ---------------------------------------
       Il verde e il blu dell'insegna. Sono quelli che si vedono di piu':
       pulsanti, collegamenti, titoli, icone. */
    --ip-green: #2d8a47;
    --ip-green-dark: #1b6a35;        /* verde scuro: sopra il pulsante, al passaggio del mouse */
    --ip-green-light: #e7f4ea;       /* verde chiarissimo: sfondi delicati */
    --ip-green-deep: #1f7a3d;        /* verde intenso: alcune scritte in evidenza */

    --ip-navy: #132290;              /* blu del marchio */
    --ip-navy-dark: #15145f;         /* blu scuro */
    --ip-navy-light: #eceaf9;        /* blu chiarissimo: sfondi delicati */
    --ip-navy-title: #1e2b5c;        /* blu dei titoli di sezione, piu' morbido */

    /* --- La barra in cima alle pagine -------------------------------------
       Quella con telefono, indirizzo e icone dei social. Ha una voce sua
       perche' non sempre va del colore dei titoli: su certe combinazioni si
       vuole della tinta viva, con i titoli scuri. */
    --ip-barra-superiore: #132290;
    --ip-barra-superiore-testo: #ffffff;

    /* --- Colori di servizio ----------------------------------------------
       Servono ai messaggi: rosso per gli errori, arancione per gli avvisi.
       Si cambiano di rado. */
    --ip-red: #d2130a;
    --ip-red-dark: #a80f08;
    --ip-red-light: #fbe9e8;

    --ip-orange: #ff9f43;
    --ip-orange-dark: #e07d19;
    --ip-orange-light: #fff2e4;

    /* --- Sfondi e superfici -----------------------------------------------
       Da qui si decide se il sito e' chiaro o scuro. Sono le tinte grandi:
       il fondo delle pagine, le fasce che si alternano, il colore delle
       schede e quello del piede.

       Per un sito a fasce scure con il testo chiaro - come si vede su certi
       siti immobiliari - si scuriscono "fascia" e "superficie" e si schiarisce
       "testo su scuro": non serve toccare nessun foglio di stile. */
    --ip-sfondo-pagina: #ffffff;     /* il fondo di tutte le pagine */
    --ip-fascia-chiara: #f8f8f9;     /* le fasce che si alternano al bianco */
    --ip-fascia-tenue: #f2f2f3;      /* una seconda tinta di fascia, appena piu' marcata */
    --ip-superficie: #ffffff;        /* schede degli immobili, riquadri, finestre */
    --ip-pannello-fondo: #ffffff;    /* i pannelli che si aprono di lato */

    /* La schermata che si vede mentre la pagina arriva. */
    --ip-preloader-cerchio: #2d8a47;   /* il cerchio che gira attorno al marchio */
    --ip-preloader-sfondo: #eceefd;    /* il velo dietro, appena accennato */
    --ip-superficie-scura: #252525;  /* il piede della pagina e le fasce scure */
    --ip-testo-su-scuro: #ffffff;    /* il testo quando il fondo e' scuro */
    --ip-bordo-tenue: #e5e7eb;       /* le righe leggere fra un riquadro e l'altro */

    /* --- Testo e bordi ---------------------------------------------------- */
    --ip-text-body: #4b5563;         /* il grigio dei paragrafi */
    --ip-text-heading: #132290;      /* il colore dei titoli principali */
    --ip-text-muted: #787878;        /* note e testi di servizio */
    --ip-icona-neutra: #525252;      /* icone che restano neutre */
    --ip-border: #eeeeee;            /* le righe di separazione */

    /* --- L'alone attorno ai campi quando si scrive -------------------------
       E' il verde del marchio reso trasparente: cambiando il verde qui sopra
       va cambiato anche qui, perche' il colore e' scritto per esteso. */
    --ip-ring: rgba(45, 138, 71, 0.25);
    --ip-ring-strong: rgba(45, 138, 71, 0.5);

    /* --- I due nomi che usa il template ------------------------------------
       Il foglio del template chiama i colori del marchio "primary" e
       "secondary": restano agganciati ai due qui sopra, cosi' basta cambiare
       una volta sola. */
    --primary: var(--ip-green);
    --secondary: var(--ip-navy);
}