/* ================================================================
   ZOOGA — Design tokens
   Tutti i valori fondanti del sistema. Un'unica fonte di verità.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Comfortaa:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Brand colors ───────────────────────────────────────────── */
  --z-orange:        #FF8600;
  --z-orange-600:    #E06A00;
  --z-orange-400:    #FF9B47;
  --z-orange-100:    #FFEAD5;

  /* ── Neutrals (dark-first) ──────────────────────────────────── */
  --z-ink:           #0A0A0A;
  --z-ink-2:         #141414;
  --z-ink-3:         #1C1C1C;
  --z-line:          #2A2A2A;
  --z-line-2:        #3A3A3A;

  --z-smoke:         #7A7A7A;
  --z-fog:           #B8B8B8;
  --z-chalk:         #E8E8E8;
  --z-paper:         #FFFFFF;

  /* ── Semantic ───────────────────────────────────────────────── */
  --z-bg:            var(--z-ink);
  --z-surface:       var(--z-ink-2);
  --z-surface-2:     var(--z-ink-3);
  --z-border:        var(--z-line);
  --z-text:          var(--z-chalk);
  --z-text-muted:    var(--z-fog);
  --z-text-dim:      var(--z-smoke);
  --z-title:         var(--z-paper);
  --z-accent:        var(--z-orange);
  --z-accent-ink:    var(--z-ink);

  /* ── Typography ─────────────────────────────────────────────── */
  --z-font-display:  'Orbitron', ui-sans-serif, system-ui, sans-serif;
  --z-font-body:     'Comfortaa', ui-rounded, system-ui, sans-serif;
  --z-fs-hero:       clamp(56px, 9vw, 136px);
  --z-fs-d1:         clamp(44px, 6vw, 88px);
  --z-fs-d2:         clamp(36px, 4.4vw, 64px);
  --z-fs-h1:         40px;
  --z-fs-h2:         28px;
  --z-fs-h3:         20px;
  --z-fs-h4:         16px;
  --z-fs-body-lg:    18px;
  --z-fs-body:       16px;
  --z-fs-body-sm:    14px;
  --z-fs-caption:    12px;
  --z-fs-eyebrow:    11px;

  --z-lh-tight:      1.05;
  --z-lh-snug:       1.2;
  --z-lh-normal:     1.5;
  --z-lh-relaxed:    1.7;

  --z-ls-tight:      -0.02em;
  --z-ls-normal:     0;
  --z-ls-wide:       0.08em;
  --z-ls-eyebrow:    0.22em;

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

  /* ── Radii ──────────────────────────────────────────────────── */
  --z-r-0:           0;
  --z-r-1:           4px;
  --z-r-2:           8px;
  --z-r-3:           14px;
  --z-r-4:           20px;
  --z-r-5:           28px;
  --z-r-full:        999px;

  /* ── Shadow & glow ──────────────────────────────────────────── */
  --z-shadow-1:      0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2);
  --z-shadow-2:      0 4px 12px rgba(0,0,0,.4);
  --z-shadow-3:      0 16px 40px rgba(0,0,0,.5);
  --z-glow:          0 0 0 1px rgba(255,134,0,.35), 0 6px 30px rgba(255,134,0,.25);
  --z-glow-soft:     0 8px 30px rgba(255,134,0,.15);

  /* ── Motion ─────────────────────────────────────────────────── */
  --z-ease:          cubic-bezier(.2,.7,.2,1);
  --z-ease-out:      cubic-bezier(.16,1,.3,1);
  --z-dur-1:         120ms;
  --z-dur-2:         220ms;
  --z-dur-3:         420ms;

  /* ── Layout ─────────────────────────────────────────────────── */
  --z-max:           1240px;
  --z-gutter:        max(24px, 4vw);

  /* ── Grid overlay ───────────────────────────────────────────── */
  --z-grid-line:     repeating-linear-gradient(
                        90deg,
                        rgba(255,255,255,.06) 0 1px,
                        transparent 1px 80px);
}

/* ── Base reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--z-bg);
  color: var(--z-text);
  font-family: var(--z-font-body);
  font-size: var(--z-fs-body);
  line-height: var(--z-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Utility display classes ─────────────────────────────────── */
.z-display, .z-h1, .z-h2, .z-h3, .z-h4 {
  font-family: var(--z-font-display);
  color: var(--z-title);
  letter-spacing: var(--z-ls-tight);
  line-height: var(--z-lh-tight);
  margin: 0;
  font-weight: 700;
}
.z-hero     { font-size: var(--z-fs-hero); font-weight: 800; letter-spacing: -0.03em; }
.z-d1       { font-size: var(--z-fs-d1);  font-weight: 700; }
.z-d2       { font-size: var(--z-fs-d2);  font-weight: 700; }
.z-h1       { font-size: var(--z-fs-h1);  font-weight: 700; }
.z-h2       { font-size: var(--z-fs-h2);  font-weight: 600; }
.z-h3       { font-size: var(--z-fs-h3);  font-weight: 600; }
.z-h4       { font-size: var(--z-fs-h4);  font-weight: 600; letter-spacing: var(--z-ls-wide); text-transform: uppercase; }

.z-eyebrow  {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-eyebrow);
  letter-spacing: var(--z-ls-eyebrow);
  text-transform: uppercase;
  color: var(--z-orange);
  font-weight: 600;
}

.z-body-lg  { font-size: var(--z-fs-body-lg); line-height: var(--z-lh-relaxed); color: var(--z-text); }
.z-body     { font-size: var(--z-fs-body);    line-height: var(--z-lh-normal);  color: var(--z-text); }
.z-body-sm  { font-size: var(--z-fs-body-sm); line-height: var(--z-lh-normal);  color: var(--z-text-muted); }
.z-caption  { font-size: var(--z-fs-caption); color: var(--z-text-muted); letter-spacing: var(--z-ls-wide); text-transform: uppercase; }

.z-kpi {
  font-family: var(--z-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--z-title);
  letter-spacing: -0.02em;
}

.z-accent-text { color: var(--z-accent); }