/* =====================
   DESIGN TOKENS
   ===================== */
:root {
  /* Colors */
  --bg:          #080a0f;
  --bg-2:        #0d1017;
  --bg-card:     #111520;
  --bg-card-alt: #0f1319;
  --border:      rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);

  --text-primary:   #f0f2f7;
  --text-secondary: #8892a4;
  --text-muted:     #4a5568;

  --accent:       #3b82f6;
  --accent-light: #60a5fa;
  --accent-glow:  rgba(59,130,246,0.25);
  --accent-2:     #1d4ed8;

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Spacing — mobile-first base */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 5rem;

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
  --shadow-glow: 0 0 60px var(--accent-glow);

  /* Transitions */
  --ease:     cubic-bezier(0.16,1,0.3,1);
  --ease-in:  cubic-bezier(0.4,0,1,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --dur-fast: 150ms;
  --dur-med:  300ms;
  --dur-slow: 600ms;

  /* Layout */
  --container: 1100px;
  --container-padding: 1.25rem;
}

@media (min-width: 640px) {
  :root {
    --container-padding: 1.75rem;
    --sp-3xl: 4.5rem;
    --sp-4xl: 6rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 2.5rem;
  }
}