:root {
  --warpweb-brand-primary: #4a9fd8;
  --warpweb-brand-primary-ch: 74 159 216;
  --warpweb-brand-secondary: #5baae8;
  --warpweb-brand-secondary-ch: 91 170 232;
  --warpweb-brand-accent: #2d7ca8;
  --warpweb-brand-accent-ch: 45 124 168;
  --warpweb-brand-foreground: #18283c;
  --warpweb-brand-foreground-ch: 24 40 60;
  --warpweb-brand-muted: #617893;
  --warpweb-brand-muted-ch: 97 120 147;
  --warpweb-brand-surface: #ffffff;
  --warpweb-brand-surface-ch: 255 255 255;
  --warpweb-brand-surface-alt: #f6fafd;
  --warpweb-brand-surface-alt-ch: 246 250 253;
  --warpweb-brand-border: #d6e2ee;
  --warpweb-brand-border-ch: 214 226 238;
  --warpweb-brand-danger: #dc2626;
  --warpweb-brand-danger-ch: 220 38 38;
  --warpweb-brand-font: 'Inter', system-ui, sans-serif;
  --warpweb-brand-font-display: 'Poppins', 'Inter', system-ui, sans-serif;
  --warpweb-brand-radius: 0.625rem;
}

body {
  font-family: var(--warpweb-brand-font);
  color: var(--warpweb-brand-foreground);
  background-color: var(--warpweb-brand-surface);
}

h1, h2, h3, h4 {
  font-family: var(--warpweb-brand-font-display);
}