:root {
  /* Northline locked palette */
  --bg: #060608;
  --surface: #0d0d12;
  --surface2: #141419;
  --surface3: #1a1a22;
  --border: #1e1e2a;
  --border-light: #2a2a3a;

  --text: #e2e2e8;
  --muted: #7a7a8c;
  --dim: #4a4a5c;
  --white: #f0f0f5;

  --accent: #c8a44e;
  --accent-glow: rgba(200, 164, 78, 0.15);
  --accent-soft: rgba(200, 164, 78, 0.08);

  --teal: #00d4aa;
  --teal-glow: rgba(0, 212, 170, 0.12);

  --coral: #ff5c5c;
  --coral-glow: rgba(255, 92, 92, 0.10);

  --blue: #5b8def;

  /* Type */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Macro spacing scale (Stripe-class) — 2px base, multiples for sections */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 64px;
  --space-11: 72px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 120px;
  --space-15: 160px;

  /* Motion — same easing family Stripe uses most */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-emph: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-mid: 0.5s;
  --dur-slow: 0.8s;
  --dur-cinema: 1.2s;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 28px;
  --section-y-desktop: 120px;
  --section-y-mobile: 64px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow-gold: 0 0 60px rgba(200, 164, 78, 0.25);
  --shadow-glow-teal: 0 0 60px rgba(0, 212, 170, 0.20);
}