/* =====================================================================
   ElbaMyLove - guidelines.css
   FONTE UNICA dei token di design globali: palette, tipografia, raggi, CTA.

   IMPORTANTE: i valori qui sotto sono quelli ATTUALI EFFETTIVI del sito.
   La base V4 NON e' resa permanente (scelta Andrea 2026-06-12): V4 resta
   solo sulle schede dettaglio. Aggiungere questo file quindi NON cambia
   l'aspetto: e' solo consolidamento in un posto solo.

   REGOLE D'USO
   - Questo file e' l'UNICO :root globale. Va caricato per primo (dopo i
     font Google, prima di Bootstrap e di custom_elbamylove.css).
   - I :root duplicati in MasterPage.master e custom_elbamylove.css vanno
     RIMOSSI (vedi _mat/GuideLine-Piano-Migrazione.md). Finche' non li togli
     il cascade resta ambiguo.
   - Restano inline SOLO gli override di istanza voluti: lo swap --c per
     categoria e i temi locali di pagine speciali (Promuovi-Attivita,
     MappaPdf). Quelli non sono duplicati: sono il meccanismo.

   Data: 2026-06-12
   ===================================================================== */

:root {

  /* ---------- INCHIOSTRO / TESTO (valori attuali) ---------- */
  --ink:    #18140f;
  --ink-md: #3a3228;
  --ink-lt: #6f665a;   /* 10/10/2026 P16: era #8a8070 (3,89:1 su bianco), ora 5,6:1 e 5,0 sulla sabbia */
  --ink-xs: #b8b0a0;

  /* ---------- ORO (valori canonici = ex set V4, adottati 2026-06-22) ---------- */
  /* Fusione: il set oro delle schede dettaglio diventa l'unico del sito.
     Sulle altre pagine l'oro risulta un filo piu' luminoso. */
  --gold:      #c9a96b;
  --gold-lt:   #ead6a8;
  --gold-dk:   #8c6d3c;   /* 10/10/2026 P16: era #a68a52 (3,29:1), ora 4,81:1 */
  --gold-pale: #f7f0e3;
  --gold-line: rgba(176, 141, 87, .25);

  /* ---------- SUPERFICI / NEUTRI (valori attuali) ---------- */
  --cream:   #f5f0e8;
  --ivory:   #faf8f3;
  --warm:    #fdfaf5;
  --sand:    #f4efe6;
  --sand-md: #ece5d8;
  --sand-dk: #d8cfc0;
  --white:   #ffffff;
  --off:     #f7f7f7;
  --dark:    #1a1a2e;
  --grey:    #676767;

  /* ---------- ACCENTI BRAND ---------- */
  --orange: #ca6f45;   /* accento/link storico (NON il bottone CTA) */
  --red:    #eb2329;
  --blue:   #1790c6;

  /* ---------- TOKEN SCHEDE DETTAGLIO (fusi da ex --v4-*, 2026-06-22) ----------
     Promossi a globali: prima vivevano scoped/inline nelle schede.
     --macro = accento di sezione (default oro), sovrascritto per categoria. */
  --line:      #e6dfd0;
  --line-soft: rgba(201,169,107,.2);
  --ink-2:     #222428;   /* testo UI scuro freddo (nav, label) */
  --ink-3:     #4a4d54;   /* testo secondario */
  --mute:      #717280;   /* testo attenuato */
  --mute-2:    #a8acb4;   /* testo molto attenuato */
  --promo:     #d9534f;   /* badge/accento promozioni */
  --promo-dk:  #b51a1f;
  --promo-bg:  #fff0f0;
  --emerald:   #3f7d62;   /* badge fiducia / conferma */
  --macro:     var(--gold);

  /* ---------- TIPOGRAFIA (solo via variabile) ---------- */
  --font-display: 'Lora', Georgia, serif;          /* titoli, hero, nomi card */
  --font-body:    'Jost', system-ui, -apple-system, sans-serif; /* body, UI */

  /* ---------- RAGGI (un knob per ruolo) ---------- */
  --r-btn:    8px;     /* bottoni CTA (scelta Andrea) */
  --r-card:   12px;    /* card / box contenuto (default, da confermare) */
  --r-badge:  6px;     /* badge / pill piccole / input (default) */
  --r-pill:   999px;   /* elementi completamente stondati */
  --r-circle: 50%;     /* avatar / dot / cerchi */

  /* ---------- CTA: colore + colore-testo per variante ---------- */
  /* Stile bottone UNICO; cambia solo la coppia di colori. */
  /* 2026-09-24: #df6834 -> #c4501d. Col bianco #df6834 dava 3,41:1 (sotto 4,5:1, testo
     del bottone poco leggibile, soprattutto su mobile); #c4501d = 4,65:1. Decisione Andrea. */
  --cta-red:   #c4501d;  --cta-red-ink:   #ffffff;
  --cta-gold:  #8a6a38;  --cta-gold-ink:  #ffffff; /* gold-dk: bianco = 5.0:1, ok */
  --cta-azure: #1790c6;  --cta-azure-ink: #ffffff;

  /* =================================================================
     COLORI PER MACRO / CATEGORIA  (valori attuali effettivi)
     tinta piena --xxx  |  chiara --xxx-lt (sfondi)  |  velo --xxx-mid (.12)
     ================================================================= */

  /* --- Macro DORMIRE --- */
  --hotel: #0d5f8a;  --hotel-lt: #e8f3fa;  --hotel-mid: rgba(13,95,138,.12);
  --camp:  #2a7a3a;  --camp-lt:  #eaf5ec;  --camp-mid:  rgba(42,122,58,.12);
  --apt:   #b87820;  --apt-lt:   #f7eedb;  --apt-mid:   rgba(184,120,32,.12);
  --res:   #5a3a8a;  --res-lt:   #efe9f7;  --res-mid:   rgba(90,58,138,.12);
  --age:   #8a2a3a;  --age-lt:   #f7e9ec;  --age-mid:   rgba(138,42,58,.12);
  /* Agriturismi (2026-10-09): verde oliva scuro, contrasto 5,8:1 col bianco;
     distinto da --camp (verde pino) e da --azi di Mangiare (verde erba). */
  --agri:  #5f6b1f;  --agri-lt:  #f2f3e4;  --agri-mid:  rgba(95,107,31,.12);

  /* --- Macro MANGIARE --- */
  --rist:  #b03010;  --rist-lt:  #fdf0ec;  --rist-mid:  rgba(176,48,16,.12);
  --azi:   #4a7a1a;  --azi-lt:   #edf5e0;  --azi-mid:   rgba(74,122,26,.12);
  --ric:   #8a5a1a;  --ric-lt:   #fdf3e0;  --ric-mid:   rgba(138,90,26,.12);
  --vini:  #7a1a6a;  --vini-lt:  #f5eaf3;  --vini-mid:  rgba(122,26,106,.12);
  --erb:   #1a6a5a;  --erb-lt:   #e0f5f0;  --erb-mid:   rgba(26,106,90,.12);

  /* NB: Scopri (teal), Sport, Servizi, News non hanno ancora token globali.
     Da aggiungere qui quando si mappano (oggi sono inline nelle .aspx). */
}

/* =====================================================================
   COMPONENTE CTA - stile unico, varianti solo di colore
   Hover = inverso (sfondo bianco, testo+bordo del colore della variante).
   Nomi nuovi (.cta) per non toccare subito .btn-red / .btn-footer:
   la migrazione e' descritta nel piano in _mat.
   ===================================================================== */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 11px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Rosso */
.cta--red {
  background: var(--cta-red);
  color: var(--cta-red-ink);
  border-color: var(--cta-red);
}
.cta--red:hover,
.cta--red:focus-visible {
  background: #fff;
  color: var(--cta-red);
}

/* Oro */
.cta--gold {
  background: var(--cta-gold);
  color: var(--cta-gold-ink);
  border-color: var(--cta-gold);
}
.cta--gold:hover,
.cta--gold:focus-visible {
  background: #fff;
  color: var(--cta-gold);
}

/* Azzurro (footer) */
.cta--azure {
  background: var(--cta-azure);
  color: var(--cta-azure-ink);
  border-color: var(--cta-azure);
}
.cta--azure:hover,
.cta--azure:focus-visible {
  background: #fff;
  color: var(--cta-azure);
}