:root {
  --warpweb-brand-primary: #0052cc;
  --warpweb-brand-primary-ch: 0 82 204;
  --warpweb-brand-secondary: #333333;
  --warpweb-brand-secondary-ch: 51 51 51;
  --warpweb-brand-accent: #0052cc;
  --warpweb-brand-accent-ch: 0 82 204;
  --warpweb-brand-foreground: #0f1f3b;
  --warpweb-brand-foreground-ch: 15 31 59;
  --warpweb-brand-muted: #5a7192;
  --warpweb-brand-muted-ch: 90 113 146;
  --warpweb-brand-surface: #ffffff;
  --warpweb-brand-surface-ch: 255 255 255;
  --warpweb-brand-surface-alt: #f2f6fc;
  --warpweb-brand-surface-alt-ch: 242 246 252;
  --warpweb-brand-border: #d0dced;
  --warpweb-brand-border-ch: 208 220 237;
  --warpweb-brand-danger: #dc2626;
  --warpweb-brand-danger-ch: 220 38 38;
  --warpweb-brand-font: 'IBM Plex Sans', system-ui, -apple-system, 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);
}