/* ──────────────────────────────────────────────────────────────
   Spotter — Design Tokens
   ────────────────────────────────────────────────────────────── */
:root {
  /* ── Color: Surface ───────────────────────────────────────── */
  --sp-ink-900: #0B0B0E;          /* primary surface (dark) */
  --sp-ink-800: #15151A;          /* card on dark */
  --sp-ink-700: #1F1F26;          /* elevated card on dark */
  --sp-ink-600: #2A2A33;          /* divider on dark */
  --sp-ink-500: #3D3D48;          /* muted ui on dark */

  --sp-bone-50:  #F6F4EE;         /* primary surface (light) — warm off-white */
  --sp-bone-100: #EDEAE0;         /* card on light */
  --sp-bone-200: #DCD8CB;         /* divider on light */
  --sp-bone-300: #B8B3A3;         /* muted ink on light */
  --sp-bone-400: #6E6A5E;         /* secondary ink on light */
  --sp-bone-500: #1A1A1F;         /* primary ink on light */

  /* ── Color: Brand ─────────────────────────────────────────── */
  --sp-volt: #E6FF3D;             /* signature accent — electric chartreuse */
  --sp-volt-dim: #C4DC1F;
  --sp-volt-glow: rgba(230, 255, 61, 0.35);

  --sp-ember: #FF5A1F;            /* secondary — warm push */
  --sp-coach: #B8946A;            /* coach-tier metallic — premium signifier */

  /* ── Color: System ────────────────────────────────────────── */
  --sp-good: #6EE7A8;
  --sp-warn: #FFB84A;
  --sp-stop: #FF5A6F;

  /* ── Type ─────────────────────────────────────────────────── */
  --sp-font-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --sp-font-body:    "Inter", -apple-system, system-ui, sans-serif;
  --sp-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Type scale (mobile) */
  --sp-text-display: 56px;        /* hero numerals */
  --sp-text-h1: 34px;
  --sp-text-h2: 24px;
  --sp-text-h3: 18px;
  --sp-text-body: 15px;
  --sp-text-caption: 13px;
  --sp-text-micro: 11px;

  /* ── Geometry ─────────────────────────────────────────────── */
  --sp-radius-xs: 6px;
  --sp-radius-sm: 10px;
  --sp-radius-md: 16px;
  --sp-radius-lg: 22px;
  --sp-radius-xl: 32px;
  --sp-radius-pill: 999px;

  /* ── Space ────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── Shadow ───────────────────────────────────────────────── */
  --sp-shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --sp-shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06);
  --sp-shadow-lg: 0 12px 40px rgba(0,0,0,0.16), 0 24px 80px rgba(0,0,0,0.12);
  --sp-shadow-volt: 0 0 0 4px var(--sp-volt-glow), 0 8px 24px rgba(196, 220, 31, 0.4);

  /* ── Motion ───────────────────────────────────────────────── */
  --sp-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sp-dur-fast: 160ms;
  --sp-dur-base: 280ms;
  --sp-dur-slow: 520ms;
}