/**
 * Mailmatic design tokens — shared across landing, terms, and (future) admin UI.
 * See docs/DESIGN_SYSTEM.md for usage in Next.js / Tailwind.
 */
:root {
  /* Brand — aligned with logo gradient (#3b82f6 → #6366f1) */
  --mm-hero-bg:     #0a0f1e;
  --mm-hero-bg-alt: #0d1324;
  --mm-nav-bg:      rgba(10, 15, 30, 0.92);
  --mm-nav-bg-light:rgba(255, 255, 255, 0.92);
  --mm-logo-from:   #3b82f6;
  --mm-logo-to:     #6366f1;
  --mm-surface:     #f9fafb;
  --mm-border:      #e5e7eb;
  --mm-border-dark: rgba(255, 255, 255, 0.08);
  --mm-card-dark:   rgba(255, 255, 255, 0.04);
  --mm-card-dark-hover: rgba(255, 255, 255, 0.07);
  --mm-text:        #111827;
  --mm-text-dark:   #f9fafb;
  --mm-muted:       #6b7280;
  --mm-muted-dark:  rgba(255, 255, 255, 0.52);
  --mm-accent:      #3b82f6;
  --mm-accent-hover:#2563eb;
  --mm-accent-light:#60a5fa;
  --mm-accent-dim:  rgba(59, 130, 246, 0.14);
  --mm-accent-glow: rgba(99, 102, 241, 0.35);
  --mm-white:       #ffffff;
  --mm-success:     #059669;
  --mm-radius:      10px;
  --mm-radius-lg:   14px;
  --mm-radius-xl:   16px;
  --mm-max:         1120px;
  --mm-font:        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mm-font-display: "Inter", var(--mm-font);

  /* Shadows */
  --mm-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --mm-shadow-md:   0 12px 40px rgba(0, 0, 0, 0.08);
  --mm-shadow-lg:   0 24px 64px rgba(15, 23, 42, 0.12);

  /* Motion */
  --mm-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --mm-duration:    0.2s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mm-duration: 0.01ms;
  }
}