/* ============================================================
   Token del design system dello Studio Calastri (CONTESTO_GRAFICO.md §1-§3),
   con i valori di GeoCalaHub: GeoCala UAS sta fra i programmi dell'Hub e deve
   leggersi come loro (decisione del 23.09.2026, punto 13).
   Un solo :root per tutto il portale: una regola di style.css non contiene mai
   un hex scritto a mano, solo var(--...). Un accento diverso o il ritorno agli
   angoli vivi si fanno qui, in una riga.
   ============================================================ */
:root {
  /* palette di brand: dodici colori, invariati dalla prima versione */
  --color-red: #CC0000;          /* brand: azioni principali, accenti, allarme */
  --color-red-hover: #aa0000;
  --color-black: #1a1a1a;        /* testo principale */
  --color-dark: #2d2d2d;
  --color-muted: #666666;        /* testo secondario, label, meta */
  --color-border: #e0e0e0;
  --color-bg: #f7f7f7;           /* sfondo pagina */
  --color-white: #ffffff;        /* card, barra, footer */
  --color-section-bg: #fafafa;
  --color-green: #1b8a4d;        /* stato ok */
  --color-blue: #1565c0;         /* informazione, neutro */
  --color-amber: #b07d00;        /* attenzione */

  /* tinte derivate dal rosso: cambia solo la trasparenza */
  --red-tint: rgba(204, 0, 0, .06);        /* fondo di uno stato attivo */
  --red-ring: rgba(204, 0, 0, .14);        /* anello di focus */
  --red-glow: rgba(204, 0, 0, .28);        /* alone sotto i bottoni pieni */
  --red-bordo: rgba(204, 0, 0, .35);
  --red-tratteggio: rgba(204, 0, 0, .45);
  --line-soft: rgba(26, 26, 26, .07);      /* separatori interni più tenui del bordo */
  --line-media: rgba(26, 26, 26, .14);
  --velo: rgba(0, 0, 0, .45);              /* sotto le finestre modali */

  /* fondi tenui degli stati (pill, flash, caselle): gli stessi di GeoCalaHub */
  --tinta-verde: #e6f4ec;
  --tinta-ambra: #fff7e6;
  --tinta-blu: #e8f0fb;
  --tinta-neutra: #f0f0f0;
  --tinta-rossa: #fee2e2;
  --verde-confermata: #15803d;
  /* bordi e testi scuri degli stessi stati: propri del portale (pill con il
     bordo, testo del flash più scuro del colore di stato per il contrasto) */
  --bordo-verde: #bfe3cf;
  --bordo-ambra: #fbd9a5;
  --bordo-blu: #bcd6f2;
  --tinta-rossa-forte: #fecaca;
  --testo-verde: #14623a;
  --testo-ambra: #92400e;
  --testo-rosso: #8c0000;
  --testo-blu: #0d4a8f;

  /* unico colore fuori palette: la copia di lavoro non deve sembrare interfaccia */
  --color-dev: #d97706;
  --color-dev-scuro: #b45309;
  /* il portale usa lo stesso arancione per le missioni «da eseguire» (mappa,
     KML, PDF): e' la semantica gia' in servizio, resta com'e' */
  --color-amber-strong: var(--color-dev);

  /* superfici scure: login, toast, pagine di servizio */
  --login-fondo: #111111;
  --login-riga: #ee3333;
  --login-alone: rgba(204, 0, 0, .22);        /* aloni rossi sul fondo del login */
  --login-alone-tenue: rgba(204, 0, 0, .16);
  --toast-fondo: rgba(20, 22, 27, .86);     /* toast: superficie scura sopra la pagina */
  --toast-testo: #f2f4f7;
  --servizio-fondo: #1a1d23;
  --servizio-testo: #d7dce3;
  --servizio-etichetta: #9aa3b2;
  --barra-scorrimento: #d3d3d3;
  --attesa: #ededed;

  /* tipografia: chrome in Raleway maiuscolo spaziato, corpo in Open Sans */
  --font-chrome: 'Raleway', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-mono: 'SF Mono', 'Consolas', monospace;

  /* raggi a scala */
  --radius-sm: 5px;      /* micro-controlli, swatch, legende */
  --radius: 7px;         /* bottoni, input, pill quadrate */
  --radius-lg: 12px;     /* card, tabelle, modali, finestre */
  --radius-pill: 999px;
  --border-radius: var(--radius);   /* alias storico, nessuna regola da riscrivere */

  /* elevazione a due livelli: contatto + diffusione */
  --shadow-xs: 0 1px 2px rgba(20, 22, 28, .05);
  --shadow-card: 0 1px 2px rgba(20, 22, 28, .05), 0 6px 16px -8px rgba(20, 22, 28, .16);
  --shadow-card-hover: 0 2px 4px rgba(20, 22, 28, .06), 0 16px 32px -12px rgba(20, 22, 28, .24);
  --shadow-pop: 0 2px 8px rgba(16, 18, 22, .10), 0 18px 44px -12px rgba(16, 18, 22, .32);

  /* vetro: la ricerca del mappale sopra la mappa (.ricerca-geo-input), come
     GeoCala3D — sfondo bianco quasi pieno sfocato, bordo bianco appena visibile */
  --vetro-fondo: rgba(255, 255, 255, .86);
  --vetro-bordo: rgba(255, 255, 255, .5);
  --vetro-sfoca: saturate(1.8) blur(16px);

  /* movimento */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: .14s;
  --t: .22s;

  /* layout */
  --max-width: 1280px;
  --header-h: 82px;      /* del kit, riservato: qui al posto dell'header c'e' la barra (punto 15) */
  --banda-h: 30px;
  --barra-w: 246px;
  --pannello-w: 320px;   /* colonna «Filtri e livelli» della mappa (punto 18) */
}

/* focus da tastiera sempre visibile */
:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

/* chi ha chiesto meno movimento non deve vedere animazioni */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}