/* Colori Gelaterie Duomo.
   Base digitale = valori del sito live gelaterieduomo.com (celeste #87C7EC, panna #FFF8E8,
   link #1E73BE, sfondo bianco; il sito dichiara anche <meta theme-color="#87C7EC">).
   I valori del brand book PDF (#9BD7F6 / #FFF9E9) restano disponibili come *-stampa:
   servono per coerenza con i materiali fisici, non per il web.
   Per la stampa professionale usare SEMPRE i CMYK dentro
   assets/logo/sorgenti/ (PDF vettoriali CMYK), non una conversione da HEX. */
:root {
  /* — Celeste: la rampa. Nomi presi dal codice reale (Faro/faro-header.css). — */
  --celeste: #87C7EC;            /* primario digitale, sito live */
  --celeste-stampa: #9BD7F6;     /* valore brand book / materiali stampati */
  --celeste-chiaro: #F1F9FE;     /* wash di sfondo, hover tenui */
  --celeste-tenue: #E2F2FC;      /* stato attivo, pressed */
  --celeste-bordo: #B9E3F9;      /* bordi su fondo celeste chiaro */
  --celeste-medio: #6FBEE8;      /* hover del pieno celeste, focus ring */
  --celeste-scuro: #2E7CA6;      /* eyebrow, icone, testo d'accento */
  --celeste-profondo: #225E7F;   /* testo su celeste-tenue */

  /* — Panna — */
  --panna: #FFF8E8;              /* secondario digitale, sito live */
  --panna-stampa: #FFF9E9;       /* valore brand book */
  --panna-scuro: #F3E8CF;        /* bordo dei blocchi panna */

  /* — Inchiostri e neutri — */
  --bianco: #FFFFFF;
  --blu: #1E73BE;                /* link e testo blu del sito */
  --ink: #1C242B;                /* antracite: testo principale e CTA piene */
  --ink-2: #3C4750;
  --ink-3: #5C6B77;
  --ink-4: #7D8D99;
  --linea: #DCE6ED;
  --linea-tenue: #EEF4F9;
  --zebra: #F8FBFD;              /* righe alternate tabella */

  /* — Semantici (coppie sfondo/testo, dal codice Faro) — */
  --ok-bg: #E4F1EC;   --ok-fg: #1F6354;
  --warn-bg: #FBF1DE; --warn-fg: #8A5D17;
  --bad-bg: #F8E7E4;  --bad-fg: #8F2F27;

  /* — Alias semantici: usare questi nei componenti — */
  --surface-page: var(--bianco);
  --surface-card: var(--bianco);
  --surface-panna: var(--panna);
  --surface-celeste: var(--celeste);
  --surface-wash: var(--celeste-chiaro);
  --surface-zebra: var(--zebra);

  --text-body: var(--ink);
  --text-muted: var(--ink-3);
  --text-faint: var(--ink-4);
  --text-link: var(--blu);
  --text-accent: var(--celeste-scuro);
  --text-on-celeste: var(--ink);      /* mai bianco: #FFF su #87C7EC è ~1.8:1 */
  --text-on-ink: var(--panna);

  --border-default: var(--linea);
  --border-subtle: var(--linea-tenue);
  --border-panna: var(--panna-scuro);
  --border-celeste: var(--celeste-bordo);

  /* CTA: il celeste pieno non regge testo bianco, quindi l'azione primaria
     consumer è antracite su panna; il celeste resta l'azione secondaria. */
  --action-primary-bg: var(--ink);
  --action-primary-fg: var(--panna);
  --action-primary-bg-hover: #2B353E;
  --action-secondary-bg: var(--celeste);
  --action-secondary-fg: #16303F;
  --action-secondary-bg-hover: var(--celeste-medio);

  --focus-ring: var(--celeste-medio);
}