@font-face {
  font-family: "Mulish";
  src: url("./assets/fonts/mulish/Mulish-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Mulish";
  src: url("./assets/fonts/mulish/Mulish-Italic-VariableFont_wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --app-navy: #151c31;
  --app-navy-raised: #202941;
  --app-blue: #5f80c7;
  --app-blue-dark: #4767ad;
  --app-off-white: #f7f7f3;
  --app-soft-blue: #eef1f7;
  --app-white: #ffffff;
  --app-text: #151c31;
  --app-muted: #697080;
  --app-border: #dfe3ea;
  --app-font-sans: "Mulish", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-weight-regular: 400;
  --app-weight-medium: 500;
  --app-weight-semibold: 600;
  --app-leading-body: 1.65;
  --app-leading-heading: 1.12;
  --app-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  font-family: var(--app-font-sans);
  font-synthesis: none;
}

body,
button,
input,
textarea,
select {
  font-family: var(--app-font-sans);
}

body {
  font-weight: var(--app-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}