/* ═══════════════════════════════════════════
   SAYLO — Design Tokens
   Single source of truth for all design values
═══════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --void:       #080810;
  --void-2:     #0F0F1A;
  --void-3:     #161625;
  --void-4:     #1C1C2E;

  --signal:     #FF4D00;
  --signal-l:   #FF7A40;
  --signal-d:   #CC3D00;
  --signal-dim: rgba(255, 77, 0, 0.12);

  --sky:        #00D4FF;
  --sky-dim:    rgba(0, 212, 255, 0.10);

  --pulse:      #00E5A0;
  --pulse-dim:  rgba(0, 229, 160, 0.09);

  --violet:     #8B5CF6;
  --violet-dim: rgba(139, 92, 246, 0.10);

  /* ── Text ── */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary:  rgba(255, 255, 255, 0.30);

  /* ── Borders ── */
  --bd:   rgba(255, 255, 255, 0.07);
  --bd-2: rgba(255, 255, 255, 0.12);
  --bd-3: rgba(255, 255, 255, 0.18);

  /* ── Typography ── */
  --font-display: 'Geist', 'Inter', sans-serif;
  --font-body:    'Geist', 'Inter', sans-serif;

  /* ── Spacing ── */
  --section-pad:    130px 80px;
  --section-pad-sm:  80px 32px;

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 100px;

  /* ── Transitions ── */
  --ease:       cubic-bezier(0.23, 1, 0.32, 1);
  --transition: 0.25s var(--ease);
}