:root {
  /* Backgrounds */
  --bg-base:     #0B0D1A;
  --bg-surface:  #111422;
  --bg-card:     #1A1E35;
  --bg-hover:    #1F2440;

  /* Borders */
  --border:        rgba(108, 92, 231, 0.18);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-focus:  rgba(108, 92, 231, 0.6);

  /* Accent — violet */
  --violet:      #6C5CE7;
  --violet-alt:  #8B7CF6;
  --violet-dim:  rgba(108, 92, 231, 0.12);
  --violet-glow: 0 0 20px rgba(108, 92, 231, 0.18);

  /* Text */
  --text-primary:   #E8E6FF;
  --text-secondary: #9DA3BE;
  --text-muted:     #525870;
  --text-violet:    #A78BFA;

  /* Semantic */
  --success:  #22C55E;
  --error:    #EF4444;
  --warning:  #F59E0B;
  --info:     #38BDF8;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Type */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing (base-4 scale) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;
  --sp-8: 32px;  --sp-10: 40px; --sp-12: 48px;
}