/* =========================================================================
   GEPI Expo 2026 — Design Tokens
   Colors, typography, spacing, radii, shadows.
   Loaded globally; consume via var(--token) only.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&display=swap");

/* =========================================================================
   GOTHAM — font ufficiale di marca GEPI Expo (Hangar20)
   Tutti i pesi self-hosted da /fonts.
   ========================================================================= */
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Thin.otf") format("opentype");          font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Thin_Italic.otf") format("opentype");   font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Extra_Light.otf") format("opentype");   font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Extra_Light_Italic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Light.otf") format("opentype");         font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Book.otf") format("opentype");          font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Regular.otf") format("opentype");       font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Italic.otf") format("opentype");        font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Medium.otf") format("opentype");        font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Bold.otf") format("opentype");          font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Bold_Italic.ttf") format("truetype");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Black.otf") format("opentype");         font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("fonts/Gotham_Ultra.otf") format("opentype");         font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ================================================================
     MANDATORY TOKEN ALIASES — fonte di verità unica (spec 2026-04-29)
     Tutti i componenti DEVONO usare queste variabili.
     ================================================================ */
  --gepi-primary:        #E20614;   /* rosso — solo titoli, CTA, logo */
  --gepi-secondary:      #FAB800;   /* giallo — hero bg, area Pastry */
  --gepi-text:           #000000;   /* testo primario */
  --gepi-text-inverse:   #FFFFFF;   /* testo su sfondo scuro/colorato */
  --gepi-soft:           #FFBC7D;   /* SOLO bg morbido — MAI testo */
  --gepi-bg-dark:        #0A0A0A;   /* footer */
  --gepi-area-pastry:    #FAB800;
  --gepi-area-pizza:     #E20614;
  --gepi-area-resto:     #000000;
  --gepi-area-truck:     #E8E3DC;

  /* Spacing 8px base — obbligatoria */
  --sp-xs:   8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  64px;
  --sp-2xl: 80px;
  --sp-3xl: 120px;

  /* Logo sizes — rigide, max-width assolute */
  --logo-hero:    540px;
  --logo-section: 320px;
  --logo-footer:  220px;   /* MAI oltre */
  --logo-header-h: 48px;   /* altezza header sticky */
  --logo-header-w: 200px;  /* max-width header sticky */
  --logo-card:     80px;
  --logo-favicon:  32px;

  /* ---------- BRAND PALETTE (exact hex from gepiexpo.it) ---------- */
  --gepi-red:       #E20614;   /* Primary — titoli, CTA, logo */
  --gepi-red-ink:   #B20510;   /* Hover / pressed red */
  --gepi-gold:      #FAB800;   /* Secondary — accenti, badge */
  --gepi-gold-ink:  #D89F00;   /* Hover / pressed gold */
  --gepi-peach:     #FFBC7D;   /* Sfondi morbidi — MAI testo */
  --gepi-peach-50:  #FFE4CC;   /* Peach wash */
  --gepi-black:     #000000;   /* Text */
  --gepi-white:     #FFFFFF;

  /* Neutrals — derived, warm-leaning */
  --gepi-ink:       #1A1614;   /* Near-black with warmth */
  --gepi-slate-80:  #3A322E;
  --gepi-slate-60:  #6B615B;
  --gepi-slate-40:  #A8A09A;
  --gepi-slate-20:  #E4DED8;   /* Hairlines, dividers */
  --gepi-cream:     #FBF7F1;   /* Off-white page bg */
  --gepi-sand:      #F4EDE3;   /* Section bg */

  /* ---------- SEMANTIC FG / BG ---------- */
  --fg-1: var(--gepi-ink);        /* Primary text */
  --fg-2: var(--gepi-slate-60);   /* Secondary text */
  --fg-3: var(--gepi-slate-40);   /* Muted / captions */
  --fg-on-red: var(--gepi-white);
  --fg-on-gold: var(--gepi-black);
  --fg-accent: var(--gepi-red);

  --bg-1: var(--gepi-white);      /* Card / panel */
  --bg-2: var(--gepi-cream);      /* Page */
  --bg-3: var(--gepi-sand);       /* Alt section */
  --bg-soft: var(--gepi-peach-50);
  --bg-hero-red: var(--gepi-red);
  --bg-hero-gold: var(--gepi-gold);

  --border-1: var(--gepi-slate-20);
  --border-2: #CFC6BC;
  --border-strong: var(--gepi-ink);

  /* ---------- STATUS (derived for forms / admin only) ---------- */
  --ok:    #2E7D4F;
  --warn:  var(--gepi-gold);
  --error: var(--gepi-red);

  /* ---------- TYPOGRAPHY ----------
     Gotham è il font ufficiale del marchio GEPI Expo (visibile negli SVG dei loghi
     e nei materiali di Hangar20). Self-hosted da /fonts — vedi @font-face sopra.
     Pesi disponibili: 100 / 200 / 300 / 350 (Book) / 400 / 500 / 700 / 800 / 900.
     Pesi italic: 100, 200, 400, 700.
     Roboto Slab resta come font istituzionale/quote (italic serif). */
  --font-display: "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Roboto Slab", "Georgia", "Times New Roman", serif;

  /* Type scale — generous, display-forward (matches site H1 84px/600) */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;   /* accent */
  --fs-24: 24px;   /* body */
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-84: 84px;   /* H1 display */
  --fs-120: 120px; /* Hero poster */

  --lh-tight:   1.05;  /* @kind font */
  --lh-heading: 1.12;  /* @kind font */
  --lh-snug:    1.3;   /* @kind font */
  --lh-body:    1.5;   /* @kind font */
  --lh-loose:   1.7;   /* @kind font */

  --ls-display: -0.02em;   /* @kind font */
  --ls-tight:   -0.01em;   /* @kind font */
  --ls-normal:  0;         /* @kind font */
  --ls-wide:    0.02em;    /* @kind font */
  --ls-caps:    0.08em;    /* @kind font */

  --fw-light:  300;  /* @kind font */
  --fw-book:   350;  /* @kind font */
  --fw-regular:400;  /* @kind font */
  --fw-medium: 500;  /* @kind font */
  --fw-semi:   700;  /* @kind font */
  --fw-bold:   700;  /* @kind font */
  --fw-black:  800;  /* @kind font */
  --fw-ultra:  900;  /* @kind font */

  /* ---------- SPACING (4 / 8 base) ---------- */
  --sp-0: 0;     /* @kind spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-blob: 50% 50% 50% 50% / 60% 60% 40% 40%; /* half-circle hero */

  /* ---------- SHADOWS (warm-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(26, 22, 20, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 22, 20, 0.08);
  --shadow-md: 0 6px 18px rgba(26, 22, 20, 0.10);
  --shadow-lg: 0 16px 40px rgba(26, 22, 20, 0.14);
  --shadow-red: 0 10px 24px rgba(226, 6, 20, 0.28);
  --shadow-gold: 0 10px 24px rgba(250, 184, 0, 0.32);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-med:  200ms;  /* @kind other */
  --dur-slow: 320ms;  /* @kind other */
}

/* =========================================================================
   Semantic element styles — apply typographic system
   ========================================================================= */

html { font-family: var(--font-body); color: var(--fg-1); }
body { font-family: var(--font-body); font-size: var(--fs-18); line-height: var(--lh-body); color: var(--fg-1); background: var(--bg-2); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(48px, 6vw, var(--fs-84));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: clamp(32px, 4vw, var(--fs-48));
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-32);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.accent, .eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-20);
  line-height: 1.2;
  color: var(--gepi-red);
}

.label, .caps {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-14);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-1);
}

.quote, .serif {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-style: italic;
}

.institutional {
  /* For footer / contact / official notices */
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--gepi-sand);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

a { color: var(--gepi-red); text-decoration: none; }
a:hover { color: var(--gepi-red-ink); text-decoration: underline; text-underline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--sp-6) 0; }

::selection { background: var(--gepi-gold); color: var(--gepi-black); }