/* ============================================================
   FirenzeMeteo — Design tokens (restyling conservativo 2026)
   Mantiene l'identità blu/cyan meteo, modernizzata e leggera.
   ============================================================ */
:root {
  /* --- Brand: cyan/blu meteo (dai colori storici del tema) --- */
  --c-cyan-500: #1fb3ef;   /* accent primario (firma) */
  --c-cyan-600: #1499d6;
  --c-cyan-400: #5ec9de;
  --c-blue-900: #0d3368;   /* blu profondo: testo forte, header scuro */
  --c-blue-700: #0d6998;
  --c-blue-050: #eaf6ff;   /* superfici tenui */
  --c-blue-100: #def2ff;

  /* --- Accenti meteo --- */
  --c-sun:   #ffa800;      /* sole / evidenza calda */
  --c-rain:  #3b6fb7;      /* pioggia */
  --c-good:  #4caf50;      /* bel tempo / positivo */
  --c-alert: #e53935;      /* allerta */

  /* --- Neutri --- */
  --c-ink:      #16202c;   /* testo principale */
  --c-ink-soft: #51606e;   /* testo secondario */
  --c-line:     #e6ecf2;   /* bordi/separatori */
  --c-surface:  #ffffff;   /* card */
  --c-bg:       #f4f8fb;   /* sfondo pagina */
  --c-bg-alt:   #eef4f9;

  /* --- Gradienti meteo --- */
  --grad-sky:  linear-gradient(135deg, #1fb3ef 0%, #1573c4 60%, #0d3368 100%);
  --grad-soft: linear-gradient(180deg, #eaf6ff 0%, #ffffff 100%);

  /* --- Tipografia: stack di sistema (zero download, veloce) --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-sans);
  --fs-300: 1.0625rem;  /* 17px (testo minore) */
  --fs-400: 1.25rem;    /* 20px (base) */
  --fs-500: 1.5rem;     /* 24px */
  --fs-600: 1.75rem;    /* 28px */
  --fs-700: 2.125rem;   /* 34px */
  --fs-800: 2.5rem;     /* 40px */
  --fs-900: clamp(2.25rem, 4.5vw, 3.25rem); /* 36-52px, titolo bilanciato */
  --lh-tight: 1.15;
  --lh-body: 1.65;

  /* --- Spaziatura (scala 4px) --- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;

  /* --- Forme & ombre --- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(13,51,104,.06), 0 1px 3px rgba(13,51,104,.08);
  --shadow:    0 4px 14px rgba(13,51,104,.08), 0 2px 6px rgba(13,51,104,.06);
  --shadow-lg: 0 18px 40px rgba(13,51,104,.16);

  /* --- Layout --- */
  --container: 1200px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --header-h: 80px;
}