/* ════════════════════════════════════════════════════════
   tokens.css — JomWork Investor Pitch
   Single source of truth for all design tokens.
   ════════════════════════════════════════════════════════ */

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

:root {
  /* ── Backgrounds ─────────────────────────────────── */
  --bg:       #020810;
  --bg1:      #060d1c;
  --bg2:      #091526;

  /* ── Surfaces ────────────────────────────────────── */
  --surface:  rgba(255,255,255,0.03);
  --surface2: rgba(255,255,255,0.06);
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.13);

  /* ── Brand colours ───────────────────────────────── */
  --gold:       #f0b429;
  --gold-dim:   rgba(240,180,41,0.10);
  --gold-glow:  rgba(240,180,41,0.22);
  --blue:       #2979ff;
  --blue-dim:   rgba(41,121,255,0.10);
  --blue-glow:  rgba(41,121,255,0.22);
  --cyan:       #06b6d4;
  --cyan-dim:   rgba(6,182,212,0.10);
  --green:      #10b981;
  --green-dim:  rgba(16,185,129,0.10);
  --green-glow: rgba(16,185,129,0.20);
  --amber:      #f59e0b;
  --amber-dim:  rgba(245,158,11,0.10);
  --red:        #ef4444;
  --red-dim:    rgba(239,68,68,0.10);

  /* Track accent aliases (set per-track via JS on body) */
  --track-accent:     var(--gold);
  --track-accent-dim: var(--gold-dim);

  /* ── Text ────────────────────────────────────────── */
  --text:   #e2e8f0;
  --text2:  #94a3b8;
  --text3:  #475569;

  /* ── Typography ──────────────────────────────────── */
  --orb:  'Orbitron', monospace;
  --mono: 'Share Tech Mono', monospace;
  --sans: 'Barlow', sans-serif;
  --cond: 'Barlow Condensed', sans-serif;

  /* ── Spacing ─────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;  --s8: 64px; --s9: 96px;

  /* ── Radius ──────────────────────────────────────── */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;

  /* ── Transitions ─────────────────────────────────── */
  --ease:   cubic-bezier(0.4,0,0.2,1);
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.45s;
}

/* ── Base Reset ──────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  zoom: 1;                                        /* 13" MacBook Air  */
}
@media (min-width: 1440px) { html { zoom: 1; } } /* 14–15" laptops   */
@media (min-width: 1920px) { html { zoom: 1;   } } /* 1080p+ / wide    */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::-webkit-scrollbar       { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg2); border-radius:2px; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* ── Keyframes ───────────────────────────────────────── */
@keyframes fade-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes screen-in {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes cell-shake {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-4px); }
  40%     { transform:translateX(4px); }
  60%     { transform:translateX(-3px); }
  80%     { transform:translateX(3px); }
}
@keyframes scan-line {
  0%   { top:-2px; }
  100% { top:100%; }
}
@keyframes pulse-ring {
  0%   { transform:scale(1); opacity:0.6; }
  100% { transform:scale(2.2); opacity:0; }
}
@keyframes bar-fill {
  from { width:0%; }
  to   { width:var(--bar-w, 0%); }
}
@keyframes count-up {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes glow-pulse {
  0%,100% { opacity:0.5; }
  50%     { opacity:1; }
}
@keyframes reveal {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}