@font-face {
  font-family: 'Barlow';
  src: url('/fonts/barlow/barlow-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/fonts/barlow/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('/fonts/barlow/barlow-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-white-to-black: #ffffff;
  --color-offwhite-to-charcoal: #F5F5F7;
  --color-gray-to-charcoal: #E5E7EB;
  --color-black-to-white: #0F0F0F;
  --color-charcoal-to-gray: #33343A;
  --color-brand: #2E7AFF;
  --color-hover: #FAFAFA;
}

[data-theme="dark"] {
  --color-white-to-black: #0F0F0F;
  --color-offwhite-to-charcoal: #27292D;
  --color-gray-to-charcoal: #33343A;
  --color-black-to-white: #ffffff;
  --color-charcoal-to-gray: #E5E7EB;
  --color-brand: #5A87FF;
  --color-hover: #27292D;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100%;
  line-height: 1.5;
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

ul,
ol {
  list-style: none;
  padding-left: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

input,
textarea,
[contenteditable="true"] {
  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font: inherit;
}

hr {
  height: 0;
  border: 0;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: none !important;
}