@font-face {
  font-family: "light";
  src: local("sofia-pro-400"), url("../fonts/sofia-pro-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 86%;
  descent-override: 14%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "light";
  src: local("sofia-pro-700"), url("../fonts/sofia-pro-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 86%;
  descent-override: 14%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "bold";
  src: local("sofia-pro-700"), url("../fonts/sofia-pro-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 86%;
  descent-override: 14%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "caps";
  src: local("sofia-pro-900"), url("../fonts/sofia-pro-900.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  ascent-override: 86%;
  descent-override: 14%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "label";
  src: local("sofia-pro-900"), url("../fonts/sofia-pro-900.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  ascent-override: 86%;
  descent-override: 14%;
  line-gap-override: 0%;
}

:root {
  --color-header: #084153;
  --color-header-accent: #52c2cf;
  --color-coral: #f0604b;
  --color-coral-dark: #c0250f;
  --color-coral-pastel: #fff2f0;
  --color-green-link: #017e72;
  --color-copy: #5d5a5a;
  --color-results: #f9f9f9;
  --color-footer: #eeeeee;
  --color-white: #ffffff;
  --header-gradient: linear-gradient(83.95deg, rgb(82 194 207 / 0%) 50%, rgb(82 194 207 / 50%) 100%), linear-gradient(90deg, #084153 0%, #084153 100%);
  --header-height: 100px;
  --results-width: 440px;
  --card-radius: 8px;
  --control-height: 45px;
  --control-radius: 22.5px;
  --shadow-card: 0 6px 11px rgb(0 0 0 / 4%);
  --shadow-card-hover: 0 6px 11px rgb(0 0 0 / 8%);
}