:root {
  --color-teal: #52b7c1;
  --color-navy: #2d3c4b;
  --color-orange: #ffa600;
  --color-panel-bg: #f2f8fa;
  --color-panel-border: #ddeef1;
  --color-muted: #737986;
  --color-error: #bf111b;
  --color-registered-bg: #a7d5dc;
  --color-ineligible-bg: #e5e5e9;
  --color-page-bg: #EFEDE7;
  --color-divider: #f2f1ef;
  --color-input-border: #bec1c7;
  --color-focus: #2A6FDB;
  --font-sans: 'Inter', -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: 'IBM Plex Serif', serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-page-bg);
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}

a {
  color: var(--color-teal);
}

a:hover {
  color: var(--color-navy);
}

input:focus,
select:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

button {
  font-family: inherit;
  border-radius: 0;
}

input,
select {
  border-radius: 0;
}

img {
  max-width: 100%;
}