/* ============================================================
   TOKENS — Design Tokens (Signal Flow)
   ============================================================ */

:root {
  /* ── Colors ───────────────────────────────────────────── */
  --bg:               #0c0c14;
  --bg-soft:          #12121e;
  --bg-elevated:      #1a1a2e;
  --surface:          rgba(18, 18, 30, 0.72);
  --surface-strong:   rgba(26, 26, 46, 0.85);
  --border:           rgba(99, 102, 241, 0.15);
  --border-hover:     rgba(99, 102, 241, 0.35);
  --text:             #e2e8f0;
  --text-secondary:   #94a3b8;
  --accent:           #6366f1;
  --accent-hover:     #818cf8;
  --accent-amber:     #f59e0b;
  --accent-emerald:   #10b981;
  --glow:             0 0 30px rgba(99, 102, 241, 0.25);
  --glow-strong:      0 0 60px rgba(99, 102, 241, 0.4);

  /* ── Nav ──────────────────────────────────────────────── */
  --nav-bg:           rgba(12, 12, 20, 0.85);
  --nav-border:       rgba(99, 102, 241, 0.1);
  --nav-active:       rgba(99, 102, 241, 0.12);

  /* ── Sizes ────────────────────────────────────────────── */
  --radius:           16px;
  --radius-sm:        8px;
  --radius-lg:        24px;
  --shadow:           0 20px 60px rgba(0, 0, 0, 0.4);
  --max-width:        1120px;

  /* ── Typography ───────────────────────────────────────── */
  --font-mono:        'JetBrains Mono', monospace;
  --font-sans:        'Inter', system-ui, sans-serif;

  /* ── Transitions ──────────────────────────────────────── */
  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    600ms;
  --duration-reveal:  800ms;
  --duration-kinetic: 1200ms;

  /* ── Easings ──────────────────────────────────────────── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:      cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Anchor ───────────────────────────────────────────── */
  --anchor-offset:    96px;
}