/* ============================================================
   variables.css — Design tokens (single source of truth)
   ============================================================ */

:root {
  /* ---- Colors: Dark palette ---- */
  --dark:           #080810;
  --dark-2:         #0f0f1a;
  --dark-3:         #1a1a2e;
  --dark-card:      rgba(255, 255, 255, 0.04);
  --dark-border:    rgba(255, 255, 255, 0.08);

  /* ---- Colors: Light palette ---- */
  --surface:        #f4f5f7;
  --surface-card:   #ffffff;
  --surface-alt:    #eef0f4;
  --surface-border: rgba(0, 0, 0, 0.08);

  /* ---- Colors: Accent ---- */
  --accent:         #6c63ff;
  --accent-light:   #8b85ff;
  --accent-dark:    #4e47cc;
  --accent-gold:    #ffd700;
  --accent-glow:    rgba(108, 99, 255, 0.30);

  /* ---- Colors: Text ---- */
  --text-dark:      #0a0a0a;
  --text-body:      #374151;
  --text-muted:     #6b7280;
  --text-light:     #e8eaf0;
  --text-faint:     rgba(232, 234, 240, 0.55);

  /* ---- Colors: Terminal dots ---- */
  --terminal-bg:     #0d0d1a;
  --terminal-bar:    #161625;
  --terminal-border: rgba(255, 255, 255, 0.06);
  --dot-red:         #ff5f57;
  --dot-amber:       #febc2e;
  --dot-green:       #28c840;

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

  /* ---- Spacing ---- */
  --nav-h:          72px;
  --section-pad:    120px;

  /* ---- Shape ---- */
  --radius-sm:      8px;
  --radius-card:    16px;
  --radius-pill:    100px;

  /* ---- Shadow ---- */
  --shadow-card:    0 4px 32px rgba(0, 0, 0, 0.10);
  --shadow-lift:    0 16px 48px rgba(0, 0, 0, 0.18);
  --shadow-glow:    0 8px 32px rgba(108, 99, 255, 0.50);

  /* ---- Motion ---- */
  --transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Scrollbar ---- */
  --scrollbar-w:    6px;
  --scrollbar-r:    3px;
}