:root {
  --color-bg:         #0A0A0B;
  --color-surface:    #111114;
  --color-surface-2:  #1A1A1F;
  --color-border:     #25252C;
  --color-text:       #F5F5F7;
  --color-text-mute:  #A1A1AA;
  --color-accent:     #2563EB;
  --color-accent-2:   #1D4ED8;
  --color-success:    #16A34A;
  --color-danger:     #DC2626;
  --color-focus:      #60A5FA;
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-hero: clamp(2.5rem, 6vw, 5.5rem);
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --tracking-tight: -0.02em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --container:  1280px;
  --container-narrow: 880px;
  --gutter:     clamp(1.5rem, 4vw, 3rem);
  --header-h:   72px;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   500ms;
  --dur-reveal: 800ms;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
  --z-base:   0;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal:  90;
  --z-toast:  100;
}