:root {
  /* ───── Color ───── */
  --c-bg-0:        #050507;
  --c-bg-1:        #09090b;
  --c-bg-2:        #0f0f12;
  --c-surface:     #131318;
  --c-surface-2:   #1c1c22;
  --c-line:        rgba(255,255,255,0.08);
  --c-line-strong: rgba(255,255,255,0.16);

  --c-text:        #f4f4f5;
  --c-text-2:      #a1a1aa;
  --c-text-3:      #71717a;
  --c-text-muted:  #52525b;

  --c-purple:      #7c3aed;
  --c-pink:        #ec4899;
  --c-cyan:        #06b6d4;
  --c-violet:      #8b5cf6;

  --grad-primary:  linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  --grad-cool:     linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  --grad-warm:     linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);
  --grad-mesh:     radial-gradient(at 20% 10%, rgba(124,58,237,0.30) 0%, transparent 50%),
                   radial-gradient(at 80% 20%, rgba(236,72,153,0.22) 0%, transparent 50%),
                   radial-gradient(at 50% 90%, rgba(6,182,212,0.18) 0%, transparent 50%);

  /* ───── Type ───── */
  --ff-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --ff-body:    "Inter", system-ui, sans-serif;
  --ff-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero:    clamp(3.25rem, 9vw, 8rem);
  --fs-h2:      clamp(2.2rem, 5.5vw, 4.5rem);
  --fs-h3:      clamp(1.4rem, 2.2vw, 1.85rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.7rem;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.65;

  /* ───── Space ───── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --space-10: 10rem;

  --content-max: 1280px;
  --content-pad: clamp(1.25rem, 4vw, 3rem);

  /* ───── Motion ───── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
  --dur-pre:  1600ms;

  /* ───── Radius / Shadow ───── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 32px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.5);
  --shadow-glow: 0 0 80px rgba(124,58,237,.35);

  --nav-h: 80px;
  --z-grain: 9998;
  --z-cursor: 9999;
  --z-preloader: 10000;
  --z-overlay: 9000;
  --z-nav: 100;
}