@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --color-navbar-bg: #f2ccb3;
  --color-surface: #f7fdff;
  --color-border: #195c93;
  --color-text: #1b1b1b;
  --color-primary: #ff207a;
  --color-muted: #73686a;
  --color-accent: #34789b;
  --color-placeholder: #8d797f;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --line-height-12: 16px;
  --line-height-14: 22px;
  --line-height-16: 24px;
  --line-height-20: 28px;
  --header-height: 64px;
  --page-gutter-x: 1.5rem;
}

@media (min-width: 768px) {
  :root {
    --page-gutter-x: 2.5rem;
  }
}

@media (max-width: 599.98px) {
  :root {
    --header-height: 60px;
  }
}

@media (min-width: 1200px) {
  :root {
    --page-gutter-x: 4rem;
  }
}

body {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
  color: var(--color-text);
  margin: 0;
}

.container-fluid-gutter {
  padding-left: var(--page-gutter-x);
  padding-right: var(--page-gutter-x);
}