/* ============================================================
   GEPI Expo 2026 — Design System (tokens)
   Fonte di verità: alimenta l'app PWA ora e il sito 2027.
   Palette estratta dal brand reale GEPI (header.png, logo, sito).
   ============================================================ */
:root {
  /* ---- Brand colors ---- */
  --gepi-gold:        #F8B82B;   /* firma: sfondo hero, brand */
  --gepi-gold-soft:   #FCD06B;
  --gepi-gold-deep:   #F59E27;   /* gradiente caldo */
  --gepi-red:         #DF0F21;   /* accent / CTA / titoli */
  --gepi-red-deep:    #BE0C1B;   /* hover/pressed */
  --gepi-orange:      #FA6108;   /* dettagli "fiamma" */

  /* ---- Neutrals ---- */
  --gepi-ink:         #1C1F25;   /* testo principale */
  --gepi-ink-soft:    #4C4F57;   /* testo secondario */
  --gepi-muted:       #8A8D94;   /* caption */
  --gepi-cream:       #FFF7E8;   /* superficie calda */
  --gepi-paper:       #FFFFFF;   /* card / superfici */
  --gepi-bg:          #FBF6EE;   /* sfondo app */
  --gepi-line:        rgba(28,31,37,.10);
  --gepi-line-strong: rgba(28,31,37,.18);

  /* ---- Status (allineati al modello H20) ---- */
  --gepi-success: #2E7D32;
  --gepi-danger:  var(--gepi-red);

  /* ---- Typography ---- */
  --gepi-font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gepi-font-body:    "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gepi-font-slab:    "Roboto Slab", Georgia, "Times New Roman", serif;

  --gepi-fs-eyebrow: .72rem;
  --gepi-fs-cap:     .8rem;
  --gepi-fs-body:    1rem;
  --gepi-fs-lead:    1.12rem;
  --gepi-fs-h3:      1.3rem;
  --gepi-fs-h2:      1.7rem;
  --gepi-fs-h1:      2.4rem;
  --gepi-fs-display: clamp(2.6rem, 11vw, 3.6rem);

  --gepi-fw-reg: 400;
  --gepi-fw-med: 500;
  --gepi-fw-sb:  600;
  --gepi-fw-bold:700;
  --gepi-fw-black:800;

  /* ---- Spacing (4pt) ---- */
  --gepi-s1: 4px;  --gepi-s2: 8px;  --gepi-s3: 12px; --gepi-s4: 16px;
  --gepi-s5: 20px; --gepi-s6: 24px; --gepi-s7: 32px; --gepi-s8: 40px;
  --gepi-s9: 56px; --gepi-s10: 72px;

  /* ---- Radii ---- */
  --gepi-r-sm: 10px; --gepi-r-md: 16px; --gepi-r-lg: 22px; --gepi-r-xl: 28px;
  --gepi-r-pill: 999px;

  /* ---- Shadows (calde) ---- */
  --gepi-sh-1: 0 2px 8px rgba(28,31,37,.08);
  --gepi-sh-2: 0 8px 24px rgba(28,31,37,.12);
  --gepi-sh-gold: 0 8px 24px rgba(245,158,39,.32);
  --gepi-sh-red: 0 8px 20px rgba(223,15,33,.28);

  /* ---- Layout ---- */
  --gepi-maxw: 520px;          /* mobile-first, app-like */
  --gepi-nav-h: 64px;
  --gepi-header-h: 54px;
  --gepi-safe-b: env(safe-area-inset-bottom, 0px);
  --gepi-safe-t: env(safe-area-inset-top, 0px);

  --gepi-ease: cubic-bezier(.4,0,.2,1);
}