:root {
  --warpweb-brand-primary: #3498db;
  --warpweb-brand-primary-ch: 52 152 219;
  --warpweb-brand-secondary: #2980b9;
  --warpweb-brand-secondary-ch: 41 128 185;
  --warpweb-brand-accent: #5dade2;
  --warpweb-brand-accent-ch: 93 173 226;
  --warpweb-brand-foreground: #15273d;
  --warpweb-brand-foreground-ch: 21 39 61;
  --warpweb-brand-muted: #5f7893;
  --warpweb-brand-muted-ch: 95 120 147;
  --warpweb-brand-surface: #ffffff;
  --warpweb-brand-surface-ch: 255 255 255;
  --warpweb-brand-surface-alt: #f5fafd;
  --warpweb-brand-surface-alt-ch: 245 250 253;
  --warpweb-brand-border: #d4e2ee;
  --warpweb-brand-border-ch: 212 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);
}