:root {
  --ns-color-canvas: #f7f5f9;
  --ns-color-surface: #ffffff;
  --ns-color-surface-muted: #f0edf6;
  --ns-color-surface-warm: #fdf59a;
  --ns-color-border: #D9C5C5;
  --ns-color-copy: #3f444b;
  --ns-color-copy-strong: #141827;
  --ns-color-accent: #8b0000;
  --ns-color-accent-hover: #6f0000;
  --ns-color-accent-contrast: #ffffff;
  --ns-color-highlight: #ad2727;
  --ns-color-highlight-strong: #7d1717;
  --ns-color-footer: #141827;
  --ns-color-ci-yellow: #fdf59a;
  --ns-color-ci-gold: #f3c17a;

  --ns-font-sans: Geistvf, sans-serif;
  --ns-font-serif: Moderat Serif Trial, sans-serif;

  --ns-space-1: 0.25rem;
  --ns-space-2: 0.5rem;
  --ns-space-3: 0.75rem;
  --ns-space-4: 1rem;
  --ns-space-5: 1.5rem;
  --ns-space-6: 2rem;
  --ns-space-7: 3rem;
  --ns-space-8: 4rem;
  --ns-space-9: 6rem;

  --ns-radius-xs: 0.25rem;
  --ns-radius-sm: 0.4rem;
  --ns-radius-md: 0.5rem;
  --ns-radius-lg: 0.75rem;
  --ns-radius-pill: 999px;

  --ns-shadow-soft: 0 18px 40px rgba(20, 24, 39, 0.09);
  --ns-shadow-card: 0 10px 28px rgba(20, 24, 39, 0.07);

  --ns-container-sm: 53rem;
  --ns-container-md: 81rem;
  --ns-container-lg: 103rem;

  --ns-transition-fast: 180ms ease;
  --ns-transition-base: 280ms ease;
}

html {
  scroll-behavior: smooth;
}

body.ns-site,
body.ns-styleguide {
  background: var(--ns-color-canvas);
  color: var(--ns-color-copy);
}

::selection {
  background: rgba(139, 0, 0, 0.16);
  color: var(--ns-color-copy-strong);
}