@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url("../fonts/Inter.var.woff2") format("woff2-variations"),
  url("../fonts/Inter.var.woff2") format("woff2");
  src: url("../fonts/Inter.var.woff2") format("woff2") tech("variations");
}

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  src: url("../fonts/Inter-Italic.var.woff2") format("woff2-variations"),
  url("../fonts/Inter-Italic.var.woff2") format("woff2");
  src: url("../fonts/Inter-Italic.var.woff2") format("woff2") tech("variations");
}

:root {
  --color-chart-accent: var(--green-500);
  --color-chart-strong: var(--grey-700);
  --color-chart-accent-dark: var(--green-600);
  --color-chart-lighter: var(--grey-500);
  --color-chart-accent-light: var(--green-400);
  --color-chart-lightest: var(--grey-400);
  --color-chart-accent-lighter: var(--green-300);
  --color-chart-darker: var(--grey-300);
  --color-chart-accent-lightest: var(--green-200);
}

:root {
  --breakpoint: "sm";
  --container-width: unset;
  --inner-gutter: 8px;
  --outer-gutter: 16px;
  --grid-columns: 12;
  --env: "dev";
  --grid-column-bg: rgba(127, 255, 255, 0.25);
}

@media (min-width: 750px) {
  :root {
    --breakpoint: "md";
    --container-width: unset;
    --inner-gutter: 12px;
    --outer-gutter: 20px;
    --grid-columns: 12;
  }
}

@media (min-width: 900px) {
  :root {
    --breakpoint: "lg";
    --container-width: unset;
    --inner-gutter: 16px;
    --outer-gutter: 28px;
    --grid-columns: 12;
  }
}

@media (min-width: 1024px) {
  :root {
    --breakpoint: "xl";
    --container-width: unset;
    --inner-gutter: 16px;
    --outer-gutter: 28px;
    --grid-columns: 12;
  }
}

@media (min-width: 1280px) {
  :root {
    --breakpoint: "xxl";
    --container-width: unset;
    --inner-gutter: 16px;
    --outer-gutter: 28px;
    --grid-columns: 12;
  }
}

@media (min-width: 2200px) {
  :root {
    --breakpoint: "xxxl";
    --container-width: unset;
    --inner-gutter: 16px;
    --outer-gutter: 28px;
    --grid-columns: 12;
  }
}

:root {
  --spacing-space-01: 5rem;
  --spacing-space-02: 3.75rem;
  --spacing-space-03: 6.25rem;
  --spacing-space-04: 1.75rem;
}

@media (min-width: 900px) {
  :root {
    --spacing-space-01: 7.5rem;
    --spacing-space-02: 5rem;
    --spacing-space-03: 7.5rem;
  }
}

:root {
  --sans: Inter, Helvetica, Arial, sans-serif;
  --f-heading-01-fontFamily: var(--sans);
  --f-heading-01-fontWeight: 800;
  --f-heading-01-fontSize: 42px;
  --f-heading-01-lineHeight: 100%;
  --f-heading-01-letterSpacing: -0.01em;
  --f-heading-02-fontFamily: var(--sans);
  --f-heading-02-fontWeight: 800;
  --f-heading-02-fontSize: 36px;
  --f-heading-02-lineHeight: 100%;
  --f-heading-02-letterSpacing: -0.01em;
  --f-heading-03-fontFamily: var(--sans);
  --f-heading-03-fontWeight: 800;
  --f-heading-03-fontSize: 36px;
  --f-heading-03-lineHeight: 100%;
  --f-heading-03-letterSpacing: -0.01em;
  --f-heading-04-fontFamily: var(--sans);
  --f-heading-04-fontWeight: 800;
  --f-heading-04-fontSize: 28px;
  --f-heading-04-lineHeight: 100%;
  --f-heading-04-letterSpacing: -0.01em;
  --f-heading-05-fontFamily: var(--sans);
  --f-heading-05-fontWeight: 800;
  --f-heading-05-fontSize: 28px;
  --f-heading-05-lineHeight: 110%;
  --f-heading-05-letterSpacing: -0.01em;
  --f-heading-06-fontFamily: var(--sans);
  --f-heading-06-fontWeight: 800;
  --f-heading-06-fontSize: 22px;
  --f-heading-06-lineHeight: 120%;
  --f-body-01-fontFamily: var(--sans);
  --f-body-01-fontWeight: 600;
  --f-body-01-fontSize: 20px;
  --f-body-01-lineHeight: 140%;
  --f-body-01-letterSpacing: -0.01em;
  --f-body-02-fontFamily: var(--sans);
  --f-body-02-fontWeight: 600;
  --f-body-02-fontSize: 17px;
  --f-body-02-lineHeight: 150%;
  --f-ui-01-fontFamily: var(--sans);
  --f-ui-01-fontWeight: 800;
  --f-ui-01-fontSize: 18px;
  --f-ui-01-lineHeight: 110%;
  --f-ui-01-letterSpacing: -0.01em;
  --f-ui-02-fontFamily: var(--sans);
  --f-ui-02-fontWeight: 800;
  --f-ui-02-fontSize: 16px;
  --f-ui-02-lineHeight: 110%;
  --f-ui-02-letterSpacing: -0.01em;
  --f-ui-02-light-fontFamily: var(--sans);
  --f-ui-02-light-fontWeight: 600;
  --f-ui-02-light-fontSize: 16px;
  --f-ui-02-light-lineHeight: 110%;
  --f-ui-02-light-letterSpacing: -0.01em;
  --f-ui-03-fontFamily: var(--sans);
  --f-ui-03-fontWeight: 800;
  --f-ui-03-fontSize: 14px;
  --f-ui-03-lineHeight: 110%;
  --f-ui-03-letterSpacing: -0.01em;
  --f-ui-03-light-fontFamily: var(--sans);
  --f-ui-03-light-fontWeight: 600;
  --f-ui-03-light-fontSize: 14px;
  --f-ui-03-light-lineHeight: 130%;
  --f-ui-03-light-letterSpacing: -0.01em;
  --f-ui-04-fontFamily: var(--sans);
  --f-ui-04-fontWeight: 800;
  --f-ui-04-fontSize: 12px;
  --f-ui-04-lineHeight: 100%;
  --f-ui-04-letterSpacing: -0.01em;
  --f-ui-05-fontFamily: var(--sans);
  --f-ui-05-fontWeight: 800;
  --f-ui-05-fontSize: 10px;
  --f-ui-05-lineHeight: 110%;
  --f-ui-05-letterSpacing: -0.01em;
  --f-caption-fontFamily: var(--sans);
  --f-caption-fontWeight: 800;
  --f-caption-fontSize: 12px;
  --f-caption-lineHeight: 120%;
  --f-display-01-fontFamily: var(--sans);
  --f-display-01-fontWeight: 800;
  --f-display-01-fontSize: 120px;
  --f-display-01-lineHeight: 100%;
  --f-display-01-letterSpacing: -0.01em;
}

@media (min-width: 750px) {
  :root {
    --f-heading-01-fontSize: 48px;
  }
}

@media (min-width: 900px) {
  :root {
    --f-heading-01-fontSize: 72px;
    --f-heading-02-fontSize: 48px;
    --f-display-01-fontSize: 150px;
  }
}

@media (min-width: 1024px) {
  :root {
    --f-heading-01-fontSize: 83px;
    --f-heading-02-fontSize: 60px;
    --f-heading-03-fontSize: 42px;
    --f-heading-04-fontSize: 36px;
  }
}

:root {
  --grey-100: #f8f8f8;
  --grey-200: #f2f2f2;
  --grey-300: #e6e6e6;
  --grey-400: #d8d8d8;
  --grey-500: #8c8c8c;
  --grey-600: #6e6e6e;
  --grey-700: #666666;
  --grey-800: #4d4d4d;
  --grey-900: #242424;
  --green-100: #eaffee;
  --green-200: #d3ffdc;
  --green-300: #9dffb4;
  --green-400: #63fb92;
  --green-500: #00e766;
  --green-600: #00c959;
  --green-700: #009d45;
  --green-800: #007734;
  --green-900: #004f23;
  --yellow-100: #fefee5;
  --yellow-200: #ffffcb;
  --yellow-300: #fdfdaa;
  --yellow-400: #ffff8b;
  --yellow-500: #ffff51;
  --yellow-600: #f3f30a;
  --yellow-700: #d7d72b;
  --yellow-800: #9a9a1e;
  --yellow-900: #636313;
  --orange-100: #fff4ee;
  --orange-200: #ffeade;
  --orange-300: #ffdcc5;
  --orange-400: #ffcca9;
  --orange-500: #ffb87e;
  --orange-600: #ffa543;
  --orange-700: #cb7f28;
  --orange-800: #995f1e;
  --orange-900: #653f14;
  --red-100: #feefef;
  --red-200: #ffe0e1;
  --red-300: #ffc7c9;
  --red-400: #ff9ea2;
  --red-500: #ff7a7f;
  --red-600: #ff4d68;
  --red-700: #d01111;
  --red-800: #a3001a;
  --red-900: #6f0011;
  --purple-100: #f9f3ff;
  --purple-200: #f4e8ff;
  --purple-300: #e9ceff;
  --purple-400: #ddb1ff;
  --purple-500: #d18fff;
  --purple-600: #c461ff;
  --purple-700: #af56e4;
  --purple-800: #8337b1;
  --purple-900: #3d1e4f;
  --blue-100: #eff0ff;
  --blue-200: #dee0ff;
  --blue-300: #caceff;
  --blue-400: #b2b8ff;
  --blue-500: #7a89f5;
  --blue-600: #2b69fc;
  --blue-700: #0034cb;
  --blue-800: #002799;
  --blue-900: #001a65;
  --cyan-100: #E0EEFF;
  --cyan-200: #D3E6FF;
  --cyan-300: #B5D8FF;
  --cyan-400: #92C8FF;
  --cyan-500: #6CBFFE;
  --cyan-600: #3FA9F5;
  --cyan-700: #267FBE;
  --cyan-800: #1F689B;
  --cyan-900: #15496D;
  --black: #000000;
  --white: #ffffff;
  --transparent: transparent;
  --current: currentColor;
}