/* ─────────────────────────────────────────────────────────────────────────
   Tactiq Design Tokens
   Single source of truth. Import this file in your stylesheet
   or expose these as Tailwind theme tokens.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color · Surface ─────────────────────────────────────────────────── */
  --bg:           #080808;   /* page background */
  --bg-elev:     #0f0f0f;   /* card / panel  */
  --bg-elev-2:   #161616;   /* nested card / input */
  --bg-elev-3:   #1d1d1d;   /* hover state */

  /* ── Color · Border / divider ────────────────────────────────────────── */
  --line:        rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);
  --line-bright: rgba(255,255,255,0.22);

  /* ── Color · Text ────────────────────────────────────────────────────── */
  --fg:          #f3f1ea;
  --fg-dim:      rgba(243,241,234,0.72);
  --fg-dim-2:    rgba(243,241,234,0.50);
  --fg-dim-3:    rgba(243,241,234,0.32);

  /* ── Color · Brand ───────────────────────────────────────────────────── */
  --gold:        #c9a84c;
  --gold-soft:   rgba(201,168,76,0.18);
  --gold-hover:  #d6b760;
  --gold-press:  #b89740;
  --gold-on:     #1a1305;   /* text on gold buttons */

  /* ── Color · Secondary (Lakers purple) ───────────────────────────────── */
  --purple:      #6E27B5;
  --purple-soft: rgba(110,39,181,0.22);

  /* ── Color · States ──────────────────────────────────────────────────── */
  --success: #34d399;
  --warning: #fbbf24;
  --danger:  #f87171;
  --live:    #f87171;        /* red pulse for "Live" badges */

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Type scale (clamps for fluid responsive) */
  --fs-h1:    clamp(48px, 6vw, 92px);
  --fs-h2:    clamp(36px, 4.4vw, 64px);
  --fs-h3:    clamp(24px, 2.4vw, 32px);
  --fs-h4:    20px;
  --fs-lead:  clamp(18px, 1.6vw, 22px);
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --fs-mono:  11px;          /* uppercase mono labels */

  --lh-tight:   1.0;
  --lh-display: 1.05;
  --lh-snug:    1.25;
  --lh-base:    1.55;
  --lh-loose:   1.7;

  --ls-tight:   -0.04em;
  --ls-snug:    -0.02em;
  --ls-base:     0;
  --ls-wide:     0.04em;
  --ls-mono:     0.08em;     /* mono uppercase label letter-spacing */

  /* ── Spacing scale ───────────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 80px;
  --sp-11: 120px;

  /* Layout */
  --container:        1280px;   /* main content width */
  --container-narrow: 960px;    /* prose / cta blocks */
  --gutter:           clamp(20px, 4vw, 48px);
  --section-py:       clamp(64px, 9vw, 128px);

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --r-1: 6px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-pill: 999px;

  /* ── Shadow ──────────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-3: 0 14px 40px rgba(0,0,0,0.5);
  --shadow-4: 0 24px 60px rgba(0,0,0,0.55);

  /* Inner ring for cards on dark */
  --ring-inset: inset 0 0 0 1px var(--line);

  /* Glow accents */
  --glow-gold:   0 0 0 1px rgba(201,168,76,0.4), 0 14px 50px rgba(201,168,76,0.18);
  --glow-purple: 0 0 0 1px rgba(110,39,181,0.4), 0 14px 50px rgba(110,39,181,0.18);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   120ms;
  --d-base:   220ms;
  --d-slow:   400ms;

  /* ── Z-index ─────────────────────────────────────────────────────────── */
  --z-nav:     50;
  --z-overlay: 80;
  --z-modal:   100;
  --z-tweaks:  200;
}

/* ── Base reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv11";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Scrollbar (dark) ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a2a; }

/* ── Utility classes ─────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.eyebrow-dim { color: var(--fg-dim-2); }

.h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-display); letter-spacing: var(--ls-tight); margin: 0; }
.h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-display); letter-spacing: var(--ls-tight); margin: 0; }
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-snug); margin: 0; }
.h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); margin: 0; }

.lead { font-size: var(--fs-lead); color: var(--fg-dim); line-height: var(--lh-snug); margin: 0; }
.muted { color: var(--fg-dim); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }

.divider { height: 1px; background: var(--line); }

/* Section spacing */
.section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section-header { margin-bottom: var(--sp-9); max-width: 720px; }
.section-header .eyebrow + .h2 { margin-top: var(--sp-3); }
.section-header .h2 + .lead { margin-top: var(--sp-4); }