/* ═══════════════════════════════════════════
   Design Tokens — Марафон по Вайбкодингу
   ═══════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg:          #080810;
  --card:        #10101e;
  --card-2:      #16162a;
  --border:      rgba(255, 255, 255, 0.07);

  /* ── Accent palette ── */
  --purple:       #8b5cf6;
  --purple-light: #a78bfa;
  --pink:         #ec4899;
  --pink-light:   #f472b6;
  --blue:         #38bdf8;
  --blue-light:   #7dd3fc;
  --orange:       #f97316;
  --green:        #22c55e;
  --green-light:  #4ade80;
  --yellow:       #fbbf24;
  --yellow-light: #fde68a;

  /* ── Text ── */
  --text:        #e2e2e8;
  --text-dim:    #9ca3af;
  --text-muted:  #6b7280;

  /* ── Gradients ── */
  --grad-btn:    linear-gradient(135deg, #8b5cf6, #ec4899);
  --grad-text:   linear-gradient(100deg, #a78bfa 0%, #f472b6 45%, #7dd3fc 100%);
  --grad-bg:     linear-gradient(135deg, #8b5cf6, #ec4899, #38bdf8);
  --grad-progress: linear-gradient(90deg, #f97316, #ef4444);

  /* ── Spacing scale ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 100px;
  --space-3xl: 140px;

  /* ── Radii ── */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-full: 100px;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
}