/* css/variables.css */
:root {
  /* ---- Colors ---- */
  --bg:              #080808;
  --bg-2:            #0f0f0f;
  --bg-3:            #141414;
  --bg-4:            #1a1a1a;

  --border:          rgba(255, 255, 255, 0.06);
  --border-hover:    rgba(255, 255, 255, 0.14);

  --text:            #f0f0f0;
  --text-muted:      #5a5a5a;
  --text-dim:        #2e2e2e;

  --purple:          #8b5cf6;
  --purple-bright:   #a78bfa;
  --purple-deep:     #6d28d9;
  --purple-glow:     rgba(139, 92, 246, 0.15);
  --purple-glow-sm:  rgba(139, 92, 246, 0.06);

  --white:           #ffffff;
  --green:           #22c55e;

  /* ---- Typography ---- */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ---- Spacing ---- */
  --section-pad:   120px 60px;
  --nav-height:    80px;

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 100px;

  /* ---- Easing ---- */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0.0, 1, 1);

  /* ---- Transitions ---- */
  --transition-fast:   0.2s var(--ease);
  --transition-base:   0.35s var(--ease);
  --transition-slow:   0.6s var(--ease);
}