/*
  Josh Comeau's Modern CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* 1. Use a more-intuitive box-sizing model */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */

* {
  margin: 0;
}

/* 3. Enable keyword animations */

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */

input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/

#root,
#__next {
  isolation: isolate;
}

:root {
  /* Neutral Colors */
  --neutral-neutral-100: #f2f4f5;
  --neutral-neutral-200: #e9ecef;
  --neutral-neutral-300: #dee2e6;
  --neutral-neutral-400: #ced4da;
  --neutral-neutral-500: #adb5bd;
  --neutral-neutral-600: #6c757d;
  --neutral-neutral-700: #495057;
  --neutral-neutral-800: #343a40;
  --neutral-neutral-900: #212529;
  --neutral-neutral-black: #141516;
  --neutral-neutral-white: #f9f9f9;

  /* Overlay Dark */
  --overlay-dark-000: #16335f00; /* 0% opacity */
  --overlay-dark-100: #16335f0a; /* 4% opacity */
  --overlay-dark-200: #16335f14; /* 8% opacity */
  --overlay-dark-300: #16335f29; /* 16% opacity */
  --overlay-dark-400: #16335f3d; /* 24% opacity */
  --overlay-dark-500: #16335f66; /* 40% opacity */
  --overlay-dark-600: #16335f8f; /* 56% opacity */
  --overlay-dark-700: #16335fa3; /* 64% opacity */
  --overlay-dark-800: #16335fcc; /* 80% opacity */
  --overlay-dark-900: #16335f; /* 100% opacity */

  /* Overlay Light */
  --overlay-light-100: #cdccd80a; /* 4% opacity */
  --overlay-light-200: #cdccd814; /* 8% opacity */
  --overlay-light-300: #cdccd829; /* 16% opacity */
  --overlay-light-400: #cdccd83d; /* 24% opacity */
  --overlay-light-500: #cdccd866; /* 40% opacity */
  --overlay-light-600: #cdccd88f; /* 56% opacity */
  --overlay-light-700: #cdccd8a3; /* 64% opacity */
  --overlay-light-800: #cdccd8cc; /* 80% opacity */
  --overlay-light-900: #cdccd8; /* 100% opacity */

  /* Primary Navy */
  --primary-navy-100: #d5ddea;
  --primary-navy-200: #aabbd4;
  --primary-navy-300: #7b95bb;
  --primary-navy-400: #5775a2;
  --primary-navy-500: #2e4e7d;
  --primary-navy-600: #16335f;
  --primary-navy-700: #0e264c;
  --primary-navy-800: #071b3a;

  /* Secondary Teal */
  --secondary-teal-100: #e4f4f5;
  --secondary-teal-200: #cbe9ec;
  --secondary-teal-300: #b3e0e4;
  --secondary-teal-400: #9ad7dd;
  --secondary-teal-500: #6bcad0;
  --secondary-teal-600: #15bec1;
  --secondary-teal-700: #049396;
  --secondary-teal-800: #006365;

  /* Tertiary Orange */
  --tertiary-orange-100: #fae9d4;
  --tertiary-orange-200: #f6d4ae;
  --tertiary-orange-300: #f2c48e;
  --tertiary-orange-400: #eeb06f;
  --tertiary-orange-500: #e5963a;
  --tertiary-orange-600: #e77e00;
  --tertiary-orange-700: #ad6001;
  --tertiary-orange-800: #663800;

  /* Tertiary Purple */
  --tertiary-purple-100: #ede0f6;
  --tertiary-purple-200: #dbc5ea;
  --tertiary-purple-300: #d0b3e4;
  --tertiary-purple-400: #ba8ed9;
  --tertiary-purple-500: #a56ccd;
  --tertiary-purple-600: #8d4eb9;
  --tertiary-purple-700: #732ba6;
  --tertiary-purple-800: #551582;

  /* Tertiary Dark Green */
  --tertiary-dark-green-100: #cee1de;
  --tertiary-dark-green-200: #a6c9c4;
  --tertiary-dark-green-300: #7fb3ad;
  --tertiary-dark-green-400: #599f97;
  --tertiary-dark-green-500: #0f8479;
  --tertiary-dark-green-600: #007667;
  --tertiary-dark-green-700: #01564b;
  --tertiary-dark-green-800: #003e36;

  /* Tertiary Dark Teal */
  --tertiary-dark-teal-100: #dceaef;
  --tertiary-dark-teal-200: #bdd7e2;
  --tertiary-dark-teal-300: #9fc5d4;
  --tertiary-dark-teal-400: #80b6c9;
  --tertiary-dark-teal-500: #41a1b9;
  --tertiary-dark-teal-600: #0096b0;

  /* Semantic Blue */
  --semantic-blue-100: #d2e5fc;
  --semantic-blue-200: #a7cdfb;
  --semantic-blue-300: #7ab1f4;
  --semantic-blue-400: #3886e4;
  --semantic-blue-500: #196cd0;
  --semantic-blue-600: #044899;
  --semantic-blue-700: #003d86;
  --semantic-blue-800: #002f67;

  /* Semantic Green */
  --semantic-green-100: #d9ebdd;
  --semantic-green-200: #abdbb6;
  --semantic-green-300: #85d397;
  --semantic-green-400: #4bc166;
  --semantic-green-500: #1ea03c;
  --semantic-green-600: #00761c;
  --semantic-green-700: #016219;
  --semantic-green-800: #004e13;

  /* Semantic Red */
  --semantic-red-100: #fff0ed;
  --semantic-red-200: #ffdad2;
  --semantic-red-300: #ffb4a4;
  --semantic-red-400: #f0775c;
  --semantic-red-500: #db4a2a;
  --semantic-red-600: #d42802;
  --semantic-red-700: #b02001;
  --semantic-red-800: #851800;

  /* Semantic Yellow */
  --semantic-yellow-100: #fcf3da;
  --semantic-yellow-200: #fce8b9;
  --semantic-yellow-300: #fadd99;
  --semantic-yellow-400: #f9d47b;
  --semantic-yellow-500: #f6c63d;
  --semantic-yellow-600: #e7b204;
  --semantic-yellow-700: #b58b00;
  --semantic-yellow-800: #564201;
}

body .icon__container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Ensure icons in buttons are properly sized and aligned */

body .icon__container svg {
  /* biome-ignore lint/nursery/noImportantStyles: Required to override inline SVG styles */
  width: 1em !important;
  /* biome-ignore lint/nursery/noImportantStyles: Required to override inline SVG styles */
  height: 1em !important;
  display: block;
  flex-shrink: 0;
}

/* Special handling for flag icons - maintain 3:2 aspect ratio */

body .icon__container svg[viewBox="0 0 24 16"] {
  /* biome-ignore lint/nursery/noImportantStyles: Required to maintain aspect ratio */
  width: 1.5em !important;
  /* biome-ignore lint/nursery/noImportantStyles: Required to maintain aspect ratio */
  height: 1em !important;
}

/* Icon margin adjustments */

body .icon--left {
  margin-left: calc(var(--space-x6) * 0.417);
  /* ~10px from 24px base */
  margin-right: calc(var(--space-x6) * 0.583);
  /* ~14px from 24px base */
}

body .icon--right {
  margin-left: calc(var(--space-x6) * 0.583);
  /* ~14px from 24px base */
  margin-right: calc(var(--space-x6) * 0.417);
  /* ~10px from 24px base */
}

body .icon--only {
  margin-left: var(--space-x3);
  /* 12px for icon-only buttons */
  margin-right: var(--space-x3);
  /* 12px for icon-only buttons */
}

body .typography__text--x-small .icon__container {
  font-size: var(--text-16);
}

body .typography__text--small .icon__container {
  font-size: var(--text-16);
}

body .typography__text--medium .icon__container {
  font-size: var(--text-24);
}

body .typography__text--large .icon__container {
  font-size: var(--text-24);
}

body .typography__text--x-large .icon__container {
  font-size: var(--text-24);
}

:root {
  /* Font families */
  --font-family-base: "Poppins", sans-serif;
  /* Font weights */
  --weight-extra-light: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Font sizes */
  --text-8: 0.5rem;
  /* 8px */
  --text-10: 0.625rem;
  /* 10px */
  --text-12: 0.75rem;
  /* 12px */
  --text-14: 0.875rem;
  /* 14px */
  --text-16: 1rem;
  /* 16px */
  --text-18: 1.125rem;
  /* 18px */
  --text-20: 1.25rem;
  /* 20px */
  --text-24: 1.5rem;
  /* 24px */
  --text-32: 2rem;
  /* 32px */
  --text-48: 3rem;
  /* 48px */
  --text-56: 3.5rem;
  /* 56px */
  --text-64: 4rem;
  /* 64px */

  /* Line heights */
  --leading-12: 0.75rem;
  /* 14px */
  --leading-14: 0.875rem;
  /* 14px */
  --leading-16: 1rem;
  /* 16px */
  --leading-21: 1.3125rem;
  /* 21px */
  --leading-24: 1.5rem;
  /* 24px */
  --leading-26: 1.625rem;
  /* 26px */
  --leading-28: 1.75rem;
  /* 28px */
  --leading-32: 2rem;
  /* 32px */
  --leading-38: 2.375rem;
  /* 38px */
  --leading-56: 3.5rem;
  /* 56px */
  --leading-64: 4rem;
  /* 64px */
  --leading-72: 4.5rem;
  /* 72px */

  /* Display classes */
  --font-display-100:
    var(--weight-semibold) var(--text-64) / var(--leading-72)
    var(--font-family-base);
  --font-display-90:
    var(--weight-semibold) var(--text-56) / var(--leading-64)
    var(--font-family-base);
  --font-display-80:
    var(--weight-semibold) var(--text-48) / var(--leading-56)
    var(--font-family-base);
  --font-display-70:
    var(--weight-semibold) var(--text-32) / var(--leading-38)
    var(--font-family-base);
  --font-display-60:
    var(--weight-semibold) var(--text-24) / var(--leading-32)
    var(--font-family-base);

  /* Title classes */
  --font-title-50:
    var(--weight-semibold) var(--text-20) / var(--leading-28)
    var(--font-family-base);
  --font-title-40:
    var(--weight-semibold) var(--text-18) / var(--leading-26)
    var(--font-family-base);
  --font-title-30:
    var(--weight-semibold) var(--text-16) / var(--leading-24)
    var(--font-family-base);
  --font-title-20:
    var(--weight-semibold) var(--text-14) / var(--leading-21)
    var(--font-family-base);
  --font-title-10:
    var(--weight-semibold) var(--text-12) / var(--leading-16)
    var(--font-family-base);

  /* Strong classes */
  --font-strong-50:
    var(--weight-medium) var(--text-20) / var(--leading-28)
    var(--font-family-base);
  --font-strong-40:
    var(--weight-medium) var(--text-18) / var(--leading-26)
    var(--font-family-base);
  --font-strong-30:
    var(--weight-medium) var(--text-16) / var(--leading-24)
    var(--font-family-base);
  --font-strong-20:
    var(--weight-medium) var(--text-14) / var(--leading-21)
    var(--font-family-base);
  --font-strong-10:
    var(--weight-medium) var(--text-12) / var(--leading-16)
    var(--font-family-base);
  --font-strong-5:
    var(--weight-medium) var(--text-10) / var(--leading-14)
    var(--font-family-base);

  /* Body classes */
  --font-body-50:
    var(--weight-regular) var(--text-20) / var(--leading-28)
    var(--font-family-base);
  --font-body-40:
    var(--weight-regular) var(--text-18) / var(--leading-26)
    var(--font-family-base);
  --font-body-30:
    var(--weight-regular) var(--text-16) / var(--leading-24)
    var(--font-family-base);
  --font-body-20:
    var(--weight-regular) var(--text-14) / var(--leading-21)
    var(--font-family-base);
  --font-body-10:
    var(--weight-regular) var(--text-12) / var(--leading-16)
    var(--font-family-base);
  --font-body-5:
    var(--weight-regular) var(--text-10) / var(--leading-14)
    var(--font-family-base);

  /* Light classes */
  --font-light-50:
    var(--weight-light) var(--text-20) / var(--leading-28)
    var(--font-family-base);
  --font-light-40:
    var(--weight-light) var(--text-18) / var(--leading-26)
    var(--font-family-base);
  --font-light-30:
    var(--weight-light) var(--text-16) / var(--leading-24)
    var(--font-family-base);
  --font-light-20:
    var(--weight-light) var(--text-14) / var(--leading-21)
    var(--font-family-base);
  --font-light-10:
    var(--weight-light) var(--text-12) / var(--leading-16)
    var(--font-family-base);
  --font-light-5:
    var(--weight-light) var(--text-10) / var(--leading-14)
    var(--font-family-base);

  /* Extra light classes */
  --font-extra-light-50:
    var(--weight-extra-light) var(--text-20) / var(--leading-28)
    var(--font-family-base);
  --font-extra-light-40:
    var(--weight-extra-light) var(--text-18) / var(--leading-26)
    var(--font-family-base);
  --font-extra-light-30:
    var(--weight-extra-light) var(--text-16) / var(--leading-24)
    var(--font-family-base);
  --font-extra-light-20:
    var(--weight-extra-light) var(--text-14) / var(--leading-21)
    var(--font-family-base);
  --font-extra-light-10:
    var(--weight-extra-light) var(--text-12) / var(--leading-16)
    var(--font-family-base);
  --font-extra-light-5:
    var(--weight-extra-light) var(--text-10) / var(--leading-14)
    var(--font-family-base);

  /* Quote classes */
  --font-quote-50:
    var(--weight-light) var(--text-20) / var(--leading-28)
    var(--font-family-base);
  --font-quote-40:
    var(--weight-light) var(--text-18) / var(--leading-26)
    var(--font-family-base);
  --font-quote-30:
    var(--weight-light) var(--text-16) / var(--leading-24)
    var(--font-family-base);
  --font-quote-20:
    var(--weight-light) var(--text-14) / var(--leading-21)
    var(--font-family-base);
  --font-quote-10:
    var(--weight-light) var(--text-12) / var(--leading-16)
    var(--font-family-base);
}

body .typography__text--x-small {
  font-size: var(--text-10);
}

body .typography__text--small {
  font-size: var(--text-12);
}

body .typography__text--medium {
  font-size: var(--text-14);
}

body .typography__text--large {
  font-size: var(--text-16);
}

body .typography__text--x-large {
  font-size: var(--text-18);
}

/* TODO - should this be part of the theme? push a button, zoom in, all values get bumped up a tier, for example? */

:root {
  /* 4px */
  --radius-xs: 0.25rem;
  /* 8px */
  --radius-sm: 0.5rem;
  /* 16px */
  --radius-md: 1rem;
  /* 24px */
  --radius-lg: 1.5rem;
  /* 100px */
  --radius-xl: 6.25rem;

  /* 2px */
  --space-x: 0.125rem;
  /* 4px */
  --space-x1: 0.25rem;
  /* 8px */
  --space-x2: 0.5rem;
  /* 12px */
  --space-x3: 0.75rem;
  /* 16px */
  --space-x4: 1rem;
  /* 24px */
  --space-x6: 1.5rem;
  /* 32px */
  --space-x8: 2rem;
  /* 40px */
  --space-x10: 2.5rem;
  /* 48px */
  --space-x12: 3rem;
}

:root {
  --border-color-error-dark: var(--semantic-red-600);
  --border-color-error-medium: var(--semantic-red-400);
  --border-color-error-subtle: var(--semantic-red-100);

  --border-color-informative-dark: var(--semantic-blue-600);
  --border-color-informative-medium: var(--semantic-blue-400);
  --border-color-informative-subtle: var(--semantic-blue-100);

  --border-color-primary-dark: var(--primary-navy-600);
  --border-color-primary-medium: var(--primary-navy-500);
  --border-color-primary-subtle: var(--primary-navy-200);

  --border-color-secondary-dark: var(--tertiary-dark-teal-600);
  --border-color-secondary-medium: var(--secondary-teal-600);
  --border-color-secondary-subtle: var(--secondary-teal-200);

  --border-color-success-dark: var(--semantic-green-600);
  --border-color-success-medium: var(--semantic-green-400);
  --border-color-success-subtle: var(--semantic-green-100);

  --border-color-warning-dark: var(--semantic-yellow-600);
  --border-color-warning-medium: var(--semantic-yellow-400);
  --border-color-warning-subtle: var(--semantic-yellow-100);

  --border-color-neutral-dark: var(--overlay-light-800);
  --border-color-neutral-medium: var(--overlay-light-500);
  --border-color-neutral-subtle: var(--overlay-light-300);

  --icon-color-black: var(--neutral-neutral-black);
  --icon-color-disabled: var(--neutral-neutral-400);
  --icon-color-error: var(--semantic-red-600);
  --icon-color-grey: var(--primary-navy-200);
  --icon-color-navy: var(--primary-navy-600);
  --icon-color-success: var(--semantic-green-600);
  --icon-color-teal: var(--secondary-teal-600);
  --icon-color-warning: var(--semantic-yellow-600);
  --icon-color-white: var(--neutral-neutral-white);

  --surface-color-error-dark: var(--semantic-red-600);
  --surface-color-error-highlight: var(--semantic-red-500);
  --surface-color-error-medium: var(--semantic-red-200);
  --surface-color-error-shade: var(--semantic-red-300);
  --surface-color-error-subtle: var(--semantic-red-100);

  --surface-color-informative-dark: var(--semantic-blue-600);
  --surface-color-informative-highlight: var(--semantic-blue-500);
  --surface-color-informative-medium: var(--semantic-blue-200);
  --surface-color-informative-shade: var(--semantic-blue-300);
  --surface-color-informative-subtle: var(--semantic-blue-100);

  --surface-color-primary-brand: var(--primary-navy-600);
  --surface-color-primary-dark: var(--primary-navy-800);
  --surface-color-primary-highlight: var(--primary-navy-500);
  --surface-color-primary-medium: var(--primary-navy-200);
  --surface-color-primary-shade: var(--primary-navy-300);
  --surface-color-primary-subtle: var(--primary-navy-100);

  --surface-color-secondary-brand: var(--secondary-teal-600);
  --surface-color-secondary-dark: var(--secondary-teal-800);
  --surface-color-secondary-highlight: var(--secondary-teal-500);
  --surface-color-secondary-medium: var(--secondary-teal-200);
  --surface-color-secondary-shade: var(--secondary-teal-300);
  --surface-color-secondary-subtle: var(--secondary-teal-100);

  --surface-color-success-dark: var(--semantic-green-600);
  --surface-color-success-highlight: var(--semantic-green-500);
  --surface-color-success-medium: var(--semantic-green-200);
  --surface-color-success-shade: var(--semantic-green-300);
  --surface-color-success-subtle: var(--semantic-green-100);

  --surface-color-warning-dark: var(--semantic-yellow-600);
  --surface-color-warning-highlight: var(--semantic-yellow-500);
  --surface-color-warning-medium: var(--semantic-yellow-200);
  --surface-color-warning-shade: var(--semantic-yellow-300);
  --surface-color-warning-subtle: var(--semantic-yellow-100);

  --surface-color-tertiary-purple-dark: var(--tertiary-purple-800);
  --surface-color-tertiary-purple-brand: var(--tertiary-purple-600);
  --surface-color-tertiary-purple-highlight: var(--tertiary-purple-500);
  --surface-color-tertiary-purple-shade: var(--tertiary-purple-300);
  --surface-color-tertiary-purple-medium: var(--tertiary-purple-200);
  --surface-color-tertiary-purple-subtle: var(--tertiary-purple-100);

  --surface-color-tertiary-orange-dark: var(--tertiary-orange-800);
  --surface-color-tertiary-orange-brand: var(--tertiary-orange-600);
  --surface-color-tertiary-orange-highlight: var(--tertiary-orange-500);
  --surface-color-tertiary-orange-shade: var(--tertiary-orange-300);
  --surface-color-tertiary-orange-medium: var(--tertiary-orange-200);
  --surface-color-tertiary-orange-subtle: var(--tertiary-orange-100);

  --surface-color-neutral-background: var(--neutral-neutral-100);
  --surface-color-neutral-card: var(--neutral-neutral-white);
  --surface-color-neutral-grey-light: var(--neutral-neutral-200);
  --surface-color-neutral-grey-subtle: var(--neutral-neutral-300);
  --surface-color-neutral-grey-medium: var(--neutral-neutral-500);
  --surface-color-neutral-grey-shade: var(--neutral-neutral-600);
  --surface-color-neutral-grey-dark: var(--neutral-neutral-800);

  --surface-color-neutral-white-light: var(--overlay-light-200);
  --surface-color-neutral-white-subtle: var(--overlay-light-300);
  --surface-color-neutral-white-medium: var(--overlay-light-400);
  --surface-color-neutral-white-shade: var(--overlay-light-600);
  --surface-color-neutral-white-dark: var(--overlay-light-800);

  --surface-color-neutral-navy-light: var(--overlay-dark-200);
  --surface-color-neutral-navy-subtle: var(--overlay-dark-300);
  --surface-color-neutral-navy-medium: var(--overlay-dark-400);
  --surface-color-neutral-navy-shade: var(--overlay-dark-600);
  --surface-color-neutral-navy-dark: var(--overlay-dark-800);

  --text-color-black: var(--neutral-neutral-900);
  --text-color-body: var(--neutral-neutral-800);
  --text-color-disabled: var(--neutral-neutral-400);
  --text-color-error: var(--semantic-red-600);
  --text-color-highlight: var(--secondary-teal-600);
  --text-color-secondary: var(--neutral-neutral-700);
  --text-color-success: var(--semantic-green-600);
  --text-color-title: var(--primary-navy-600);
  --text-color-title-hover: var(--primary-navy-400);
  --text-color-white: var(--neutral-neutral-white);
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/assets/poppins-latin-200-normal-B8tqA5oA.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/poppins-latin-300-normal-Dku2WoCh.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/poppins-latin-300-italic-EWCPeN2Y.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/poppins-latin-400-normal-cpxAROuN.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/poppins-latin-500-normal-C8OXljZJ.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/poppins-latin-600-normal-zEkxB9Mr.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: "Poppins", sans-serif;
}

/* do a `composes: focusable from global` to tack this on to an element to give the teal border on focus */

.focusable:focus-visible[data-focus-visible="true"],
.focusable:focus-visible {
  outline: var(--space-x1) solid var(--border-color-secondary-dark);
  outline-offset: 0;
  box-shadow: 0px 0px var(--space-x1) 0px var(--border-color-secondary-dark);
}

.focusable:has(:focus-visible) {
  outline: var(--space-x1) solid var(--border-color-secondary-dark);
  outline-offset: 0;
  box-shadow: 0px 0px var(--space-x1) 0px var(--border-color-secondary-dark);
}