/* ==========================================================================
   HEY — theme.css
   Sistema di token colore/tipografia condiviso da tutte le pagine e da
   tutti i 23 siti regionali + il portale italy.css.

   Come funziona:
   - Qui sotto ci sono i valori DI DEFAULT (usati da heyitalia.it / css/italy.css
     quando non specializzato).
   - Ogni file regione (css/marche.css, css/lazio.css, ...) sovrascrive SOLO
     le variabili --color-accent-* / --color-accent-2-* con la propria palette,
     lasciando invariati neutri, spaziature, ombre e tipografia. Vedi in fondo
     a questo file un esempio commentato.
   - Le pagine (provincia.php, comune.php, ecc.) NON usano classi DaisyUI per
     i colori: usano queste variabili direttamente (style="color:var(--color-accent-700)"
     o classi utility qui sotto), così un solo file per regione basta a
     ricolorare l'intero sito senza toccare le pagine.
   - Font: Figtree (testo) e Caprasimo (titoli display) sono self-hosted in
     css/fonts.css — nessuna chiamata a Google Fonts a runtime.
   ========================================================================== */

:root {
  /* --- superfici / testo neutro (uguali per tutte le regioni) --- */
  --color-bg: #fcfaf7;
  --color-surface: #f4efe6;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  /* --- accent primario: colore di brand della regione --- */
  --color-accent: #c67139;
  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  /* --- accent secondario: usato per eventi/badge complementari --- */
  --color-accent-2: #7a8a5e;
  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  /* --- tipografia --- */
  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  /* --- forma / ombre (uguali per tutte le regioni) --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }

.hey-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.hey-surface { background: var(--color-surface); }
.hey-badge-accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.hey-badge-accent2 { background: var(--color-accent-2-100); color: var(--color-accent-2-900); }
.hey-btn-primary { background: var(--color-accent-700); color: #fdf7ee; border-radius: 999px; font-weight: 700; }
.hey-btn-primary:hover { background: var(--color-accent-800); color: #fdf7ee; }
.hey-eyebrow { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: var(--color-accent-700); }
.hey-eyebrow-dot { width:7px; height:7px; border-radius:999px; background: var(--color-accent); display:block; }
.hey-text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* ==========================================================================
   ESEMPIO — così un file regione (es. css/marche.css) sovrascrive la palette:

   :root {
     --color-accent: #2f7a63;
     --color-accent-100: #eaf6f1; --color-accent-200: #cdece1;
     --color-accent-300: #a3dbc7; --color-accent-400: #6fbfa4;
     --color-accent-500: #47a184; --color-accent-600: #34816a;
     --color-accent-700: #26654f; --color-accent-800: #1a4839;
     --color-accent-900: #10281f;
   }

   Vedi css/marche.css in questo stesso commit per l'esempio completo.
   ========================================================================== */