/* ZEROON.ONE — design tokens */
:root {
  /* surfaces */
  --bg-0: #05060D;
  --bg-1: #0B0D1A;
  --bg-2: #10132A;
  --bg-glass: rgba(139, 92, 246, 0.06);
  --line: rgba(139, 92, 246, 0.18);
  --line-strong: rgba(139, 92, 246, 0.38);

  /* text */
  --text-0: #F5F6FA;
  --text-1: #B7B9C7;
  --text-2: #7A7D8C;
  --text-muted: #55586A;

  /* brand */
  --brand-violet: #8B5CF6;
  --brand-violet-2: #A78BFA;
  --brand-blue: #3B82F6;
  --brand-blue-2: #60A5FA;
  --brand-pink: #EC4899;

  /* accents */
  --accent-warn: #F87171;           /* problem section red */
  --accent-warn-soft: rgba(248, 113, 113, 0.14);
  --accent-ok: #34D399;              /* who-it's-for ✓ */
  --accent-ok-soft: rgba(52, 211, 153, 0.12);

  --gradient-1: linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%);
  --gradient-2: linear-gradient(90deg, #EC4899 0%, #8B5CF6 50%, #3B82F6 100%);
  --gradient-3: linear-gradient(180deg, rgba(139, 92, 246, 0) 0%, rgba(139, 92, 246, 0.12) 100%);
  --gradient-planet: radial-gradient(
    circle at 35% 40%,
    #6D28D9 0%,
    #4C1D95 30%,
    #1E1B4B 55%,
    #0B0D1A 85%
  );

  --glow-sm: 0 0 12px rgba(139, 92, 246, 0.35);
  --glow-md: 0 0 24px rgba(139, 92, 246, 0.45);
  --glow-lg: 0 0 48px rgba(139, 92, 246, 0.55);

  /* type scale (px) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: clamp(2rem, 4vw, 2.75rem);
  --fs-64: clamp(2.5rem, 6vw, 4rem);
  --fs-84: clamp(3rem, 8vw, 5.25rem);

  /* spacing (8px baseline) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
  --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;
  --s-32: 8rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 500ms;

  /* layout */
  --container: 1280px;
  --container-narrow: 960px;
  --nav-h: 72px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}