:root {
  --ipx-font: "Funnel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ipx-bg: #f7f7f4;
  --ipx-bg-warm: #efefea;
  --ipx-bg-band: #e9ecec;
  --ipx-surface: #ffffff;
  --ipx-text: #1f2326;
  --ipx-text-body: #5c5e60;
  --ipx-text-muted: #4f4a50;
  --ipx-text-faint: #9a9c9e;
  --ipx-border: #d9dcdd;
  --ipx-border-soft: #e5e7e8;
  --ipx-deep: #10161c;
  --ipx-deep-hover: #151a1c;
  --ipx-accent: #e30613;
  --ipx-container: 80rem;
  --ipx-radius: 0.625rem;
  --ipx-radius-md: 0.5rem;
  --ipx-radius-lg: 1rem;
  --ipx-radius-xl: 1.5rem;
  --ipx-section-y: 6rem;
  --ipx-gutter: 1.5rem;
  --ipx-header-h: 5rem;
  --ipx-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --ipx-gutter: 2.5rem;
    --ipx-section-y: 8rem;
  }
}

html.dark-industrial {
  --ipx-bg: #0e1114;
  --ipx-bg-warm: #13191f;
  --ipx-bg-band: #10161c;
  --ipx-surface: #171c21;
  --ipx-text: #f4f4f1;
  --ipx-text-body: #b8bec4;
  --ipx-text-muted: #7f878e;
  --ipx-text-faint: #7f878e;
  --ipx-border: #2b3238;
  --ipx-border-soft: #2b3238;
  --ipx-deep: #222931;
}