@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dmsans/dm-sans-variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-cobalt: #2047d9;
  --color-cobalt-hover: #193ab5;
  --color-cobalt-active: #142e91;
  --color-cobalt-wash: #f3f6ff;
  --color-ink: #17212b;
  --color-white: #ffffff;
  --color-citrus: #e5f044;
  --color-text-secondary: #4d5963;
  --color-divider: #dbe1e5;
  --color-input-border: #7e8998;
  --font-display: "Archivo", Arial, sans-serif;
  --font-body: "DM Sans", Arial, sans-serif;
  --font-display-width: 100;
  --font-display-weight: 500;
  --tracking-display: -0.04em;
  --text-display: clamp(2.75rem, 5vw, 4.5rem);
  --text-heading: clamp(1.875rem, 2.78vw, 2.5rem);
  --text-h1: clamp(2.25rem, 3.89vw, 3.5rem);
  --text-h2: var(--text-heading);
  --text-h3: clamp(1.5rem, 1.95vw, 1.75rem);
  --text-h4: 1.25rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --text-lede: clamp(1.125rem, 1.39vw, 1.25rem);
  --text-body: clamp(1rem, 1.19vw, 1.0625rem);
  --text-caption: 0.75rem;
  --text-label: 0.875rem;
  --text-support: 0.875rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --radius-control: 0.5rem;
  --radius-photo: 0.75rem;
  --radius-panel: 1rem;
  --measure-reading: 68ch;
}

.movanto-wordmark {
  display: block;
  width: 160px;
  min-width: 96px;
  height: auto;
}

.movanto-focus:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 4px;
}