:root {
  --fs-space-1: 0.25rem;
  --fs-space-2: 0.5rem;
  --fs-space-3: 0.75rem;
  --fs-space-4: 1rem;
  --fs-space-5: 1.5rem;
  --fs-space-6: 2rem;
  --fs-space-7: 2.75rem;
  --fs-space-8: 3.5rem;

  --fs-font-xs: 0.78rem;
  --fs-font-sm: 0.92rem;
  --fs-font-md: 1rem;
  --fs-font-lg: 1.15rem;
  --fs-font-xl: 1.45rem;
  --fs-font-2xl: 1.9rem;
  --fs-font-3xl: 2.6rem;

  --fs-radius-xs: 6px;
  --fs-radius-sm: 10px;
  --fs-radius-md: 14px;
  --fs-radius-lg: 20px;
  --fs-radius-xl: 28px;

  --fs-shadow-1: 0 14px 36px rgba(8, 14, 26, 0.25);
  --fs-shadow-2: 0 22px 50px rgba(8, 14, 26, 0.35);
  --fs-shadow-soft: 0 8px 20px rgba(10, 16, 26, 0.18);

  --fs-border-thin: 1px solid rgba(120, 140, 180, 0.25);
  --fs-border-strong: 1px solid rgba(120, 140, 180, 0.4);

  --fs-blur-xs: blur(6px);
  --fs-blur-sm: blur(12px);
  --fs-blur-md: blur(18px);

  --fs-z-base: 1;
  --fs-z-nav: 20;
  --fs-z-toast: 60;
  --fs-z-dialog: 80;
  --fs-z-paywall: 90;
  --fs-z-attract: 100;

  --fs-font-body: "Space Grotesk", "Avenir Next", "Segoe UI Variable", "Helvetica Neue", sans-serif;
  --fs-font-display: "Fraunces", "Space Grotesk", "Avenir Next", serif;

  --fs-safe-top: env(safe-area-inset-top, 0px);
  --fs-safe-right: env(safe-area-inset-right, 0px);
  --fs-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fs-safe-left: env(safe-area-inset-left, 0px);
  --fs-vw: 1vw;
}