/*
  ROBOTTIAMO — PANNELLO COLORI DEL SITO
  --------------------------------------
  Modifica solo i codici dopo i due punti (es.: #3182CE).
  Non eliminare punto e virgola, parentesi graffe o nomi che iniziano con --.
  Salva questo file nella root del sito SiteGround come /theme.css.

  Dopo il salvataggio: ricarica il sito con CTRL + F5 (Windows) o CMD + SHIFT + R (Mac).
  Se vedi ancora i colori precedenti, cambia ?v=1 in ?v=2 nel tag theme.css dentro index.html.
*/

:root {
  /* 1. PALETTE PRINCIPALE — cambiare qui per modificare tutto il sito */
  --ink: #1A202C;              /* Testi principali e sezioni scure */
  --blue: #3182CE;             /* Blu ROBOTTIAMO / pulsanti blu */
  --blue-dark: #245E9D;        /* Blu scuro per link e dettagli */
  --magenta: #B83280;          /* Magenta ROBOTTIAMO */
  --orange: #ED6B17;           /* Arancione: pulsanti e call-to-action */
  --green: #5B9C25;            /* Verde: ORME / esiti positivi */

  /* 2. SFONDI GENERALI */
  --cream: #FAF9F6;            /* Sfondo principale avorio */
  --mist: #F2F4F4;             /* Sfondo grigio chiaro alternato */
  --line: #DDE3E7;             /* Bordi e linee sottili */
  --footer: #12202C;           /* Footer e fasce scure */
  --text-soft: #526673;        /* Testi secondari */

  /* 3. TINTE CHIARE — card e sezioni per pubblico */
  --blue-pale: #E6F5FF;
  --blue-pale-2: #EAF6FF;
  --magenta-pale: #FAEAF4;
  --orange-pale: #FFF0E3;
  --green-pale: #EFF7E9;
  --green-pale-2: #EAF7E5;

  /* 4. HERO E SEZIONI — per cambiare l’atmosfera delle pagine */
  --home-hero-start: #F8FBFC;
  --home-hero-mid: #F2F8FA;
  --home-hero-end: #EAF4F7;
  --hero-blue-start: #E6F5FF;
  --hero-blue-end: #F8FCFF;
  --hero-magenta-start: #FAE9F3;
  --hero-magenta-end: #FFF9FC;
  --hero-orange-start: #FFF0E3;
  --hero-orange-end: #FFFBF6;
  --hero-green-start: #EFF8E9;
  --hero-green-end: #FBFFFA;

  /* 5. ACCENTI — simboli e dettagli decorativi */
  --turquoise: #4EBBC7;
  --button-text: #FFFFFF;
}

/*
  APPLICAZIONE DELLA PALETTE
  Le regole seguenti collegano le variabili ai blocchi visivi del sito.
  Normalmente non serve modificarle: cambia soltanto i codici qui sopra.
*/

.home-hero { background: linear-gradient(120deg, var(--home-hero-start) 0%, var(--home-hero-mid) 56%, var(--home-hero-end) 100%); }
.page-hero--blue { background: linear-gradient(125deg, var(--hero-blue-start), var(--hero-blue-end)); }
.page-hero--magenta { background: linear-gradient(125deg, var(--hero-magenta-start), var(--hero-magenta-end)); }
.page-hero--orange { background: linear-gradient(125deg, var(--hero-orange-start), var(--hero-orange-end)); }
.page-hero--green { background: linear-gradient(125deg, var(--hero-green-start), var(--hero-green-end)); }

.site-footer { background: var(--footer); }
.button--blue { color: var(--button-text); }
.button--orange { color: var(--button-text); }

.audience-card--blue { background: var(--blue-pale); }
.audience-card--magenta { background: var(--magenta-pale); }
.audience-card--orange { background: var(--orange-pale); }
.audience-card--green { background: var(--green-pale); }
.mini-visual--robot { background: var(--blue-pale); }
.mini-visual--cards { background: var(--magenta-pale); }
.mini-visual--touch { background: var(--orange-pale); }
.mini-visual--orme { background: var(--green-pale); }
.project-card--tint { background: var(--green-pale); }
.pilot-card { background: linear-gradient(145deg, var(--green-pale-2), #F8FCF5); }
.callout { background: var(--blue-pale-2); }
.polaroid__placeholder, .media-slot__placeholder { background: linear-gradient(135deg, var(--blue-pale), var(--magenta-pale)); }