@import "tailwindcss";

/* Make sure Tailwind scans stories and .storybook files */
@source "../stories/**/*";
@source "../app/**/*";
@source "../.storybook/**/*";
@source "./**/*";

/* Hide scrollbar utility */
.scrollbar-hide {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

/* Design system scrollbar (Figma node 20612-36521): dark track + thumb with states */
.scrollbar-design {
  scrollbar-width: thin; /* Firefox: narrow scrollbar */
  scrollbar-color: var(--color-gray-500) var(--color-gray-700);
}
.scrollbar-design::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
.scrollbar-design::-webkit-scrollbar-track {
  background: var(--color-gray-700);
}
.scrollbar-design::-webkit-scrollbar-thumb {
  background: var(--color-gray-500);
  border-radius: 4px;
  border: 4px solid var(--color-gray-700); /* visual padding: thumb appears 8px within 16px track */
  background-clip: padding-box;
}
.scrollbar-design::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
  border-width: 2px; /* hover: thumb expands to 12px */
}
.scrollbar-design::-webkit-scrollbar-thumb:active {
  background: var(--color-gray-600);
  border-width: 2px;
}
.scrollbar-design::-webkit-scrollbar-corner {
  background: var(--color-gray-700);
}

/*
 * Must live in this file (same sheet as `@import "tailwindcss"`). Rules in
 * `globals.css` after that import never reach the browser.
 * Parked above the viewport until focused so it does not add header offset.
 */
.skip-to-content {
  position: absolute;
  left: var(--space-400);
  top: var(--space-400);
  z-index: 100;
  padding: var(--space-300) var(--space-400);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-invert-primary);
  color: var(--color-content-invert-primary);
  text-decoration: none;
  outline: none;
  cursor: pointer;
  box-shadow: var(--shadow-focus-default);
  transform: translateY(-200%);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  transform: translateY(0);
}

@theme inline {
  /* Custom breakpoints */
  --breakpoint-xsm: 429px;
  --breakpoint-sm: 430px;
  --breakpoint-sm2: 440px;
  --breakpoint-smd: 530px;
  --breakpoint-md: 640px;
  --breakpoint-xmd: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-lg2: 1150px;
  --breakpoint-xl: 1440px;

  /* Reset Tailwind color defaults to avoid collisions */
  --color-*: initial;

  /* Font families */
  --font-sans:
    var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:
    var(--font-bricolage-grotesque), ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Typography weight tokens */
  --typography-thin: 100;
  --typography-extralight: 200;
  --typography-light: 300;
  --typography-regular: 400;
  --typography-medium: 500;
  --typography-semibold: 600;
  --typography-bold: 700;
  --typography-extrabold: 800;
  --typography-black: 900;

  /* Space, radius, sizing, border, and icon — one name per Figma variable.
     Scale/022 stays because Spacing has no 22px step. Scale/072 and Scale/104
     back Typography/Line Height/1800 and /2600. */
  --space-0: 0px;
  --space-025: 1px;
  --space-050: 2px;
  --space-100: 4px;
  --space-150: 6px;
  --space-200: 8px;
  --space-250: 10px;
  --space-300: 12px;
  --space-400: 16px;
  --space-500: 20px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1000: 40px;
  --space-1200: 48px;
  --space-1400: 56px;
  --space-1500: 60px;
  --space-1800: 64px;
  --space-2100: 76px;
  --space-2400: 96px;
  --space-3000: 120px;
  --space-4000: 160px;
  --space-6500: 260px;

  --space-negative-100: -4px;
  --space-negative-200: -8px;
  --space-negative-300: -12px;
  --space-negative-400: -16px;
  --space-negative-600: -24px;

  --radius-0: 0px;
  --radius-100: 4px;
  --radius-200: 8px;
  --radius-300: 12px;
  --radius-400: 16px;
  --radius-500: 24px;
  --radius-full: 9999px;

  --sizing-200: 8px;
  --sizing-250: 10px;
  --sizing-300: 12px;
  --sizing-350: 14px;
  --sizing-400: 16px;
  --sizing-450: 18px;
  --sizing-500: 20px;
  --sizing-600: 24px;
  --sizing-700: 28px;
  --sizing-800: 32px;
  --sizing-900: 36px;
  --sizing-1000: 40px;
  --sizing-1100: 44px;
  --sizing-1200: 48px;
  --sizing-1300: 52px;
  --sizing-1400: 56px;
  --sizing-1500: 60px;
  --sizing-1600: 64px;
  --sizing-2400: 96px;
  --sizing-3000: 120px;
  --sizing-6500: 260px;

  --border-x-small: 1px;
  --border-small: 2px;
  --border-medium: 4px;
  --border-large: 8px;

  --icon-xsmall: 12px;
  --icon-small: 16px;
  --icon-medium: 24px;
  --icon-large: 32px;
  --icon-xlarge: 40px;

  --scale-022: 22px;
  --scale-072: 72px;
  --scale-104: 104px;

  --typography-line-height-300: 12px;
  --typography-line-height-350: 14px;
  --typography-line-height-400: 16px;
  --typography-line-height-450: 18px;
  --typography-line-height-500: 20px;
  --typography-line-height-550: var(--scale-022);
  --typography-line-height-600: 24px;
  --typography-line-height-700: 28px;
  --typography-line-height-800: 32px;
  --typography-line-height-900: 36px;
  --typography-line-height-1000: 40px;
  --typography-line-height-1100: 44px;
  --typography-line-height-1200: 48px;
  --typography-line-height-1300: 52px;
  --typography-line-height-1400: 56px;
  --typography-line-height-1800: var(--scale-072);
  --typography-line-height-2600: var(--scale-104);

  /* Grays & alpha */
  --color-gray-000: #ffffff;
  --color-gray-050: #f6f6f6;
  --color-gray-100: #e4e4e4;
  --color-gray-150: #d2d2d2;
  --color-gray-200: #c2c2c2;
  --color-gray-300: #a4a4a4;
  --color-gray-400: #8a8a8a;
  --color-gray-500: #717171;
  --color-gray-600: #5b5b5b;
  --color-gray-700: #464646;
  --color-gray-800: #303030;
  --color-gray-900: #141414;
  --color-gray-1000: #000000;

  --color-opacity-000: #00000000;
  --color-opacity-001: #00000003;
  --color-opacity-050: #0000000d;
  --color-opacity-100: #0000001a;
  --color-opacity-200: #00000033;
  --color-opacity-300: #0000004d;
  --color-opacity-400: #00000066;
  --color-opacity-500: #00000080;
  --color-opacity-600: #00000099;
  --color-opacity-700: #000000b2;
  --color-opacity-800: #000000cc;
  --color-opacity-900: #000000e5;

  /* Kiwi */
  --color-kiwi-kiwi0: #ebfff2;
  --color-kiwi-kiwi50: #c9fedf;
  --color-kiwi-kiwi100: #a8fdcd;
  --color-kiwi-kiwi150: #8cf9bd;
  --color-kiwi-kiwi200: #6ff6ae;
  --color-kiwi-kiwi300: #45ea97;
  --color-kiwi-kiwi400: #29d984;
  --color-kiwi-kiwi500: #16c472;
  --color-kiwi-kiwi600: #0ba960;
  --color-kiwi-kiwi700: #058c4e;
  --color-kiwi-kiwi800: #016c3c;
  --color-kiwi-kiwi900: #004d2b;
  --color-kiwi-kiwi1000: #00331c;

  /* Lavender */
  --color-lavender-lavender0: #f0ebff;
  --color-lavender-lavender50: #e8defe;
  --color-lavender-lavender100: #dccdf9;
  --color-lavender-lavender150: #d1bdf3;
  --color-lavender-lavender200: #c6adee;
  --color-lavender-lavender300: #b490e2;
  --color-lavender-lavender400: #a275d5;
  --color-lavender-lavender500: #8f5cc6;
  --color-lavender-lavender600: #7c47b2;
  --color-lavender-lavender700: #67359b;
  --color-lavender-lavender800: #50277e;
  --color-lavender-lavender900: #38185c;
  --color-lavender-lavender1000: #1a0033;

  /* Lime */
  --color-lime-lime0: #fbffeb;
  --color-lime-lime50: #f2fec9;
  --color-lime-lime100: #e7fda8;
  --color-lime-lime150: #daf98c;
  --color-lime-lime200: #ccf66f;
  --color-lime-lime300: #b1ea45;
  --color-lime-lime400: #98d929;
  --color-lime-lime500: #80c416;
  --color-lime-lime600: #6aa90b;
  --color-lime-lime700: #548c05;
  --color-lime-lime800: #406c01;
  --color-lime-lime900: #2d4d00;
  --color-lime-lime1000: #1e3300;

  /* Magenta */
  --color-magenta-magenta0: #ffebf0;
  --color-magenta-magenta50: #fedee7;
  --color-magenta-magenta100: #f8ccd8;
  --color-magenta-magenta150: #f0bbca;
  --color-magenta-magenta200: #eaaabc;
  --color-magenta-magenta300: #dd8ba1;
  --color-magenta-magenta400: #ce6f89;
  --color-magenta-magenta500: #be5571;
  --color-magenta-magenta600: #aa3f5b;
  --color-magenta-magenta700: #922d47;
  --color-magenta-magenta800: #761f33;
  --color-magenta-magenta900: #571222;
  --color-magenta-magenta1000: #33000e;

  /* Red */
  --color-red-red0: #ffebf1;
  --color-red-red50: #fec9d6;
  --color-red-red100: #ffb6c2;
  --color-red-red150: #ffa4ac;
  --color-red-red200: #ff9296;
  --color-red-red300: #ff6a62;
  --color-red-red400: #ef4c3d;
  --color-red-red500: #d33a26;
  --color-red-red600: #b62e1a;
  --color-red-red700: #972613;
  --color-red-red800: #771f0d;
  --color-red-red900: #571707;
  --color-red-red1000: #330800;

  /* Royal Blue */
  --color-royal-blue-royal-blue0: #ebecff;
  --color-royal-blue-royal-blue50: #c9cdfe;
  --color-royal-blue-royal-blue100: #b9bfff;
  --color-royal-blue-royal-blue150: #aab1ff;
  --color-royal-blue-royal-blue200: #99a4ff;
  --color-royal-blue-royal-blue300: #778cff;
  --color-royal-blue-royal-blue400: #5674ff;
  --color-royal-blue-royal-blue500: #3a5afe;
  --color-royal-blue-royal-blue600: #2d4adb;
  --color-royal-blue-royal-blue700: #233bb6;
  --color-royal-blue-royal-blue800: #1d2c8f;
  --color-royal-blue-royal-blue900: #171b65;
  --color-royal-blue-royal-blue1000: #080033;

  /* Rust */
  --color-rust-rust0: #ffedeb;
  --color-rust-rust50: #fed8d4;
  --color-rust-rust100: #ffc6bf;
  --color-rust-rust150: #feb4aa;
  --color-rust-rust200: #fda395;
  --color-rust-rust300: #f4836e;
  --color-rust-rust400: #e46a4c;
  --color-rust-rust500: #cd5632;
  --color-rust-rust600: #b04a1f;
  --color-rust-rust700: #904111;
  --color-rust-rust800: #703909;
  --color-rust-rust900: #512f05;
  --color-rust-rust1000: #332100;

  /* Teal */
  --color-teal-teal0: #ebfffc;
  --color-teal-teal50: #c9fef9;
  --color-teal-teal100: #a8fdf8;
  --color-teal-teal150: #8cf9f8;
  --color-teal-teal200: #6ff2f6;
  --color-teal-teal300: #45dcea;
  --color-teal-teal400: #29c3d9;
  --color-teal-teal500: #16a9c4;
  --color-teal-teal600: #0b8ea9;
  --color-teal-teal700: #05728c;
  --color-teal-teal800: #01576c;
  --color-teal-teal900: #003e4d;
  --color-teal-teal1000: #002933;

  /* Yellow */
  --color-yellow-yellow0: #fffeeb;
  --color-yellow-yellow50: #fefcc9;
  --color-yellow-yellow100: #fdfaa8;
  --color-yellow-yellow150: #f9f58c;
  --color-yellow-yellow200: #f6f06f;
  --color-yellow-yellow300: #eae345;
  --color-yellow-yellow400: #d9d129;
  --color-yellow-yellow500: #c4bb16;
  --color-yellow-yellow600: #a9a20b;
  --color-yellow-yellow700: #8c8505;
  --color-yellow-yellow800: #6c6701;
  --color-yellow-yellow900: #4d4a00;
  --color-yellow-yellow1000: #333000;

  /* Border */
  --color-border-default-brand-accent: var(--color-yellow-yellow300);
  --color-border-default-brand-primary: var(--color-yellow-yellow100);
  --color-border-default-brand-secondary: var(--color-rust-rust100);
  --color-border-default-primary: var(--color-gray-900);
  --color-border-default-secondary: var(--color-gray-800);
  --color-border-default-tertiary: var(--color-gray-600);
  --color-border-default-control: var(--color-gray-400);
  --color-border-default-utility-info: var(--color-royal-blue-royal-blue300);
  --color-border-default-utility-negative: var(--color-red-red300);
  --color-border-default-utility-positive: var(--color-kiwi-kiwi300);
  --color-border-default-utility-warning: var(--color-yellow-yellow300);
  --color-border-default-negative-primary: var(
    --color-border-default-utility-negative
  );
  --color-border-default-warning-primary: var(
    --color-border-default-utility-warning
  );
  --color-border-default-positive-primary: var(
    --color-border-default-utility-positive
  );

  --color-border-invert-primary: var(--color-gray-000);
  --color-border-invert-secondary: var(--color-gray-100);
  --color-border-invert-tertiary: var(--color-gray-300);
  --color-border-invert-brand-primary: var(--color-yellow-yellow800);
  --color-border-invert-brand-accent: var(--color-yellow-yellow600);
  --color-border-invert-positive-primary: var(--color-kiwi-kiwi500);
  --color-border-invert-warning-primary: var(--color-yellow-yellow600);
  --color-border-invert-negative-primary: var(--color-red-red300);

  /* Link — Navigation / Link binds content tokens */
  --color-link-primary: var(--color-content-invert-primary);
  --color-link-primary-hover: var(--color-content-invert-quaternary);
  --color-link-primary-focus: var(--color-content-invert-quaternary);
  --color-link-primary-active: var(--color-content-invert-quaternary);
  --color-link-secondary: var(--color-content-invert-quaternary);
  --color-link-secondary-hover: var(--color-content-invert-tertiary);
  --color-link-secondary-focus: var(--color-content-invert-tertiary);
  --color-link-secondary-active: var(--color-content-invert-tertiary);
  --color-link-invert-primary: var(--color-content-default-primary);
  --color-link-invert-primary-hover: var(--color-content-default-tertiary);
  --color-link-invert-primary-focus: var(--color-content-default-tertiary);
  --color-link-invert-primary-active: var(--color-content-default-tertiary);
  --color-link-invert-secondary: var(--color-content-default-tertiary);
  --color-link-invert-secondary-hover: var(--color-content-default-primary);
  --color-link-invert-secondary-focus: var(--color-content-default-primary);
  --color-link-invert-secondary-active: var(--color-content-default-primary);
  --color-border-link-focus: var(--color-border-default-primary);
  --color-border-link-invert-focus: var(--color-border-invert-primary);

  /* Content */
  --color-content-default-brand-accent: var(--color-opacity-700);
  --color-content-default-brand-primary: var(--color-yellow-yellow50);
  --color-content-default-brand-secondary: var(--color-yellow-yellow200);
  --color-content-default-brand-lime: var(--color-lime-lime200);
  --color-content-default-brand-rust: var(--color-rust-rust100);
  --color-content-default-brand-royal: var(--color-royal-blue-royal-blue100);
  --color-content-default-brand-red: var(--color-red-red100);
  --color-content-default-brand-teal: var(--color-teal-teal100);
  --color-content-default-brand-kiwi: var(--color-kiwi-kiwi150);
  --color-content-default-brand-lavender: var(--color-lavender-lavender150);
  --color-content-default-primary: var(--color-gray-000);
  --color-content-default-secondary: var(--color-gray-200);
  --color-content-default-tertiary: var(--color-gray-300);
  --color-content-default-utility-info: var(--color-royal-blue-royal-blue500);
  --color-content-default-utility-negative: var(--color-red-red300);
  --color-content-default-utility-positive: var(--color-kiwi-kiwi300);
  --color-content-default-utility-warning: var(--color-yellow-yellow300);
  --color-content-default-negative-primary: var(
    --color-content-default-utility-negative
  );
  --color-content-default-warning-primary: var(
    --color-content-default-utility-warning
  );
  --color-content-default-positive-primary: var(
    --color-content-default-utility-positive
  );

  --color-content-invert-primary: var(--color-gray-1000);
  --color-content-invert-secondary: var(--color-gray-800);
  --color-content-invert-tertiary: var(--color-gray-700);
  --color-content-invert-quaternary: var(--color-gray-500);
  --color-content-invert-brand-primary: var(--color-yellow-yellow900);
  --color-content-invert-brand-secondary: var(--color-yellow-yellow800);
  --color-content-invert-brand-lime: var(--color-lime-lime800);
  --color-content-invert-brand-royal: var(--color-royal-blue-royal-blue700);
  --color-content-invert-brand-navy: var(--color-royal-blue-royal-blue1000);
  --color-content-invert-brand-teal: var(--color-teal-teal700);
  --color-content-invert-brand-rust: var(--color-rust-rust700);
  --color-content-invert-brand-lavender: var(--color-lavender-lavender700);
  --color-content-invert-brand-kiwi: var(--color-kiwi-kiwi800);
  --color-content-invert-brand-red: var(--color-red-red700);
  --color-content-invert-positive-primary: var(--color-kiwi-kiwi800);
  --color-content-invert-warning-primary: var(--color-yellow-yellow800);
  --color-content-invert-negative-primary: var(--color-red-red600);

  /* Surface */
  --color-surface-default-brand-red: var(--color-red-red700);
  --color-surface-default-brand-kiwi: var(--color-kiwi-kiwi800);
  --color-surface-default-brand-lavender: var(--color-lavender-lavender700);
  --color-surface-default-brand-lime: var(--color-lime-lime800);
  --color-surface-default-brand-primary: var(--color-yellow-yellow1000);
  --color-surface-default-brand-secondary: var(--color-yellow-yellow800);
  --color-surface-default-brand-royal: var(--color-royal-blue-royal-blue700);
  --color-surface-default-brand-rust: var(--color-rust-rust700);
  --color-surface-default-brand-teal: var(--color-teal-teal700);
  --color-surface-default-positive-secondary: var(--color-kiwi-kiwi1000);
  --color-surface-default-warning-secondary: var(--color-yellow-yellow1000);
  --color-surface-default-negative-secondary: var(--color-red-red1000);
  --color-surface-default-primary: var(--color-gray-1000);
  --color-surface-default-secondary: var(--color-gray-900);
  --color-surface-default-semi-opaque: var(--color-opacity-050);
  --color-surface-default-tertiary: var(--color-gray-800);
  --color-surface-default-transparent: var(--color-opacity-000);
  --color-surface-default-utility-info: var(--color-royal-blue-royal-blue400);
  --color-surface-default-utility-negative: var(--color-red-red400);
  --color-surface-default-utility-positive: var(--color-kiwi-kiwi500);
  --color-surface-default-utility-warning: var(--color-yellow-yellow500);
  --color-surface-default-negative-primary: var(
    --color-surface-default-utility-negative
  );
  --color-surface-default-warning-primary: var(
    --color-surface-default-utility-warning
  );
  --color-surface-default-positive-primary: var(
    --color-surface-default-utility-positive
  );

  --color-surface-invert-primary: var(--color-gray-000);
  --color-surface-invert-secondary: var(--color-gray-100);
  --color-surface-invert-tertiary: var(--color-gray-200);
  --color-surface-invert-brand-primary: var(--color-yellow-yellow50);
  --color-surface-invert-brand-secondary: var(--color-yellow-yellow200);
  --color-surface-invert-brand-accent: var(--color-yellow-yellow100);
  --color-surface-invert-brand-lime: var(--color-lime-lime100);
  --color-surface-invert-brand-royal: var(--color-royal-blue-royal-blue50);
  --color-surface-invert-brand-teal: var(--color-teal-teal50);
  --color-surface-invert-brand-rust: var(--color-rust-rust100);
  --color-surface-invert-brand-lavender: var(--color-lavender-lavender150);
  --color-surface-invert-brand-kiwi: var(--color-kiwi-kiwi200);
  --color-surface-invert-brand-red: var(--color-red-red100);
  --color-surface-invert-negative-primary: var(--color-red-red200);
  --color-surface-invert-negative-secondary: var(--color-red-red0);
  --color-surface-invert-warning-primary: var(--color-yellow-yellow300);
  --color-surface-invert-warning-secondary: var(--color-yellow-yellow0);
  --color-surface-invert-positive-primary: var(--color-kiwi-kiwi300);
  --color-surface-invert-positive-secondary: var(--color-kiwi-kiwi0);

  /* Shadow. Focus rings are 2px gray-900 inside 4px white, and the reverse. */
  --shadow-focus-default: 0 0 0 2px var(--color-gray-900), 0 0 0 4px var(--color-gray-000);
  --shadow-focus-invert: 0 0 0 2px var(--color-gray-000), 0 0 0 4px var(--color-gray-900);
  --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%);
  --shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%);
  --shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%);
  --shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%);

  /* Typography. Line heights read from Typography/Line Height variables.
     Older class names alias the role-first tokens. */
  --text-display-xxl: 96px;
  --text-display-xxl--line-height: var(--typography-line-height-2600);
  --text-display-xxl--letter-spacing: 0px;
  --text-display-xxl--font-weight: 500;

  --text-display-xl: 64px;
  --text-display-xl--line-height: var(--typography-line-height-1800);
  --text-display-xl--letter-spacing: 0px;
  --text-display-xl--font-weight: 500;

  --text-display-l: 52px;
  --text-display-l--line-height: var(--typography-line-height-1400);
  --text-display-l--letter-spacing: 0px;
  --text-display-l--font-weight: 500;

  --text-display-m: 44px;
  --text-display-m--line-height: var(--typography-line-height-1200);
  --text-display-m--letter-spacing: 0px;
  --text-display-m--font-weight: 500;

  --text-display-s: 32px;
  --text-display-s--line-height: var(--typography-line-height-900);
  --text-display-s--letter-spacing: 0px;
  --text-display-s--font-weight: 500;

  --text-display-xs: 24px;
  --text-display-xs--line-height: var(--typography-line-height-800);
  --text-display-xs--letter-spacing: 0px;
  --text-display-xs--font-weight: 500;

  --text-display-xxs: 18px;
  --text-display-xxs--line-height: var(--typography-line-height-550);
  --text-display-xxs--letter-spacing: 0px;
  --text-display-xxs--font-weight: 500;

  --text-heading-xxl: 40px;
  --text-heading-xxl--line-height: var(--typography-line-height-1300);
  --text-heading-xxl--letter-spacing: 0px;
  --text-heading-xxl--font-weight: 700;

  --text-heading-xl: 36px;
  --text-heading-xl--line-height: var(--typography-line-height-1100);
  --text-heading-xl--letter-spacing: 0px;
  --text-heading-xl--font-weight: 700;

  --text-heading-l: 32px;
  --text-heading-l--line-height: var(--typography-line-height-1000);
  --text-heading-l--letter-spacing: 0px;
  --text-heading-l--font-weight: 700;

  --text-heading-m: 28px;
  --text-heading-m--line-height: var(--typography-line-height-900);
  --text-heading-m--letter-spacing: 0px;
  --text-heading-m--font-weight: 700;

  --text-heading-s: 24px;
  --text-heading-s--line-height: var(--typography-line-height-800);
  --text-heading-s--letter-spacing: 0px;
  --text-heading-s--font-weight: 700;

  --text-heading-xs: 20px;
  --text-heading-xs--line-height: var(--typography-line-height-700);
  --text-heading-xs--letter-spacing: 0px;
  --text-heading-xs--font-weight: 700;

  --text-heading-xxs: 16px;
  --text-heading-xxs--line-height: var(--typography-line-height-550);
  --text-heading-xxs--letter-spacing: 0px;
  --text-heading-xxs--font-weight: 700;

  --text-label-xxl: 32px;
  --text-label-xxl--line-height: var(--typography-line-height-900);
  --text-label-xxl--letter-spacing: 0px;
  --text-label-xxl--font-weight: 500;

  --text-label-xl: 24px;
  --text-label-xl--line-height: var(--typography-line-height-700);
  --text-label-xl--letter-spacing: 0px;
  --text-label-xl--font-weight: 500;

  --text-label-l: 18px;
  --text-label-l--line-height: var(--typography-line-height-600);
  --text-label-l--letter-spacing: 0px;
  --text-label-l--font-weight: 500;

  --text-label-m: 16px;
  --text-label-m--line-height: var(--typography-line-height-500);
  --text-label-m--letter-spacing: 0px;
  --text-label-m--font-weight: 500;

  --text-label-s: 14px;
  --text-label-s--line-height: var(--typography-line-height-450);
  --text-label-s--letter-spacing: 0px;
  --text-label-s--font-weight: 500;

  --text-label-xs: 12px;
  --text-label-xs--line-height: var(--typography-line-height-350);
  --text-label-xs--letter-spacing: 0px;
  --text-label-xs--font-weight: 500;

  --text-label-xxs: 10px;
  --text-label-xxs--line-height: var(--typography-line-height-300);
  --text-label-xxs--letter-spacing: 0px;
  --text-label-xxs--font-weight: 500;

  --text-label-caps-xxs: 10px;
  --text-label-caps-xxs--line-height: var(--typography-line-height-300);
  --text-label-caps-xxs--letter-spacing: 0.2px;
  --text-label-caps-xxs--font-weight: 500;

  --text-label-caps-xs: 12px;
  --text-label-caps-xs--line-height: var(--typography-line-height-350);
  --text-label-caps-xs--letter-spacing: 0.24px;
  --text-label-caps-xs--font-weight: 500;

  --text-label-caps-l: 18px;
  --text-label-caps-l--line-height: var(--typography-line-height-600);
  --text-label-caps-l--letter-spacing: 0.36px;
  --text-label-caps-l--font-weight: 500;

  --text-label-caps-xl: 24px;
  --text-label-caps-xl--line-height: var(--typography-line-height-700);
  --text-label-caps-xl--letter-spacing: 0.48px;
  --text-label-caps-xl--font-weight: 500;

  --text-label-caps-xxl: 32px;
  --text-label-caps-xxl--line-height: var(--typography-line-height-900);
  --text-label-caps-xxl--letter-spacing: 0.64px;
  --text-label-caps-xxl--font-weight: 500;

  --text-paragraph-xxl: 32px;
  --text-paragraph-xxl--line-height: var(--typography-line-height-1000);
  --text-paragraph-xxl--letter-spacing: 0px;
  --text-paragraph-xxl--font-weight: 400;

  --text-paragraph-xl: 24px;
  --text-paragraph-xl--line-height: var(--typography-line-height-800);
  --text-paragraph-xl--letter-spacing: 0px;
  --text-paragraph-xl--font-weight: 400;

  --text-paragraph-l: 18px;
  --text-paragraph-l--line-height: var(--typography-line-height-600);
  --text-paragraph-l--letter-spacing: 0px;
  --text-paragraph-l--font-weight: 400;

  --text-paragraph-m: 16px;
  --text-paragraph-m--line-height: var(--typography-line-height-600);
  --text-paragraph-m--letter-spacing: 0px;
  --text-paragraph-m--font-weight: 400;

  --text-paragraph-s: 14px;
  --text-paragraph-s--line-height: var(--typography-line-height-500);
  --text-paragraph-s--letter-spacing: 0px;
  --text-paragraph-s--font-weight: 400;

  --text-paragraph-xs: 12px;
  --text-paragraph-xs--line-height: var(--typography-line-height-400);
  --text-paragraph-xs--letter-spacing: 0px;
  --text-paragraph-xs--font-weight: 400;

  --text-paragraph-xxs: 10px;
  --text-paragraph-xxs--line-height: var(--typography-line-height-350);
  --text-paragraph-xxs--letter-spacing: 0px;
  --text-paragraph-xxs--font-weight: 400;

  --text-paragraph-strong-xxl: 32px;
  --text-paragraph-strong-xxl--line-height: var(--typography-line-height-1000);
  --text-paragraph-strong-xxl--letter-spacing: 0px;
  --text-paragraph-strong-xxl--font-weight: 700;

  --text-paragraph-strong-xl: 24px;
  --text-paragraph-strong-xl--line-height: var(--typography-line-height-800);
  --text-paragraph-strong-xl--letter-spacing: 0px;
  --text-paragraph-strong-xl--font-weight: 700;

  --text-paragraph-strong-l: 18px;
  --text-paragraph-strong-l--line-height: var(--typography-line-height-600);
  --text-paragraph-strong-l--letter-spacing: 0px;
  --text-paragraph-strong-l--font-weight: 700;

  --text-paragraph-strong-m: 16px;
  --text-paragraph-strong-m--line-height: var(--typography-line-height-600);
  --text-paragraph-strong-m--letter-spacing: 0px;
  --text-paragraph-strong-m--font-weight: 700;

  --text-paragraph-strong-s: 14px;
  --text-paragraph-strong-s--line-height: var(--typography-line-height-500);
  --text-paragraph-strong-s--letter-spacing: 0px;
  --text-paragraph-strong-s--font-weight: 700;

  --text-paragraph-strong-xs: 12px;
  --text-paragraph-strong-xs--line-height: var(--typography-line-height-400);
  --text-paragraph-strong-xs--letter-spacing: 0px;
  --text-paragraph-strong-xs--font-weight: 700;

  --text-paragraph-strong-xxs: 10px;
  --text-paragraph-strong-xxs--line-height: var(--typography-line-height-350);
  --text-paragraph-strong-xxs--letter-spacing: 0px;
  --text-paragraph-strong-xxs--font-weight: 700;

  --text-paragraph-em-xxs: 10px;
  --text-paragraph-em-xxs--line-height: var(--typography-line-height-350);
  --text-paragraph-em-xxs--letter-spacing: 0px;
  --text-paragraph-em-xxs--font-weight: 400;

  --text-paragraph-em-m: 16px;
  --text-paragraph-em-m--line-height: var(--typography-line-height-600);
  --text-paragraph-em-m--letter-spacing: 0px;
  --text-paragraph-em-m--font-weight: 400;

  --text-link-xs: 12px;
  --text-link-xs--line-height: var(--typography-line-height-400);
  --text-link-xs--letter-spacing: 0px;
  --text-link-xs--font-weight: 400;

  --text-link-s: 14px;
  --text-link-s--line-height: var(--typography-line-height-500);
  --text-link-s--letter-spacing: 0px;
  --text-link-s--font-weight: 400;

  --text-link-m: 16px;
  --text-link-m--line-height: var(--typography-line-height-600);
  --text-link-m--letter-spacing: 0px;
  --text-link-m--font-weight: 400;

  --text-link-l: 18px;
  --text-link-l--line-height: var(--typography-line-height-600);
  --text-link-l--letter-spacing: 0px;
  --text-link-l--font-weight: 400;

  --text-link-xl: 24px;
  --text-link-xl--line-height: var(--typography-line-height-800);
  --text-link-xl--letter-spacing: 0px;
  --text-link-xl--font-weight: 400;

  --text-xx-large-display: var(--text-display-xxl);
  --text-xx-large-display--line-height: var(--text-display-xxl--line-height);
  --text-xx-large-display--letter-spacing: var(--text-display-xxl--letter-spacing);
  --text-xx-large-display--font-weight: var(--text-display-xxl--font-weight);
  --text-x-large-display: var(--text-display-xl);
  --text-x-large-display--line-height: var(--text-display-xl--line-height);
  --text-x-large-display--letter-spacing: var(--text-display-xl--letter-spacing);
  --text-x-large-display--font-weight: var(--text-display-xl--font-weight);
  --text-large-display: var(--text-display-l);
  --text-large-display--line-height: var(--text-display-l--line-height);
  --text-large-display--letter-spacing: var(--text-display-l--letter-spacing);
  --text-large-display--font-weight: var(--text-display-l--font-weight);
  --text-medium-display: var(--text-display-m);
  --text-medium-display--line-height: var(--text-display-m--line-height);
  --text-medium-display--letter-spacing: var(--text-display-m--letter-spacing);
  --text-medium-display--font-weight: var(--text-display-m--font-weight);
  --text-small-display: var(--text-display-s);
  --text-small-display--line-height: var(--text-display-s--line-height);
  --text-small-display--letter-spacing: var(--text-display-s--letter-spacing);
  --text-small-display--font-weight: var(--text-display-s--font-weight);
  --text-x-small-display: var(--text-display-xs);
  --text-x-small-display--line-height: var(--text-display-xs--line-height);
  --text-x-small-display--letter-spacing: var(--text-display-xs--letter-spacing);
  --text-x-small-display--font-weight: var(--text-display-xs--font-weight);
  --text-xx-small-display: var(--text-display-xxs);
  --text-xx-small-display--line-height: var(--text-display-xxs--line-height);
  --text-xx-small-display--letter-spacing: var(--text-display-xxs--letter-spacing);
  --text-xx-small-display--font-weight: var(--text-display-xxs--font-weight);
  --text-xx-large-heading: var(--text-heading-xxl);
  --text-xx-large-heading--line-height: var(--text-heading-xxl--line-height);
  --text-xx-large-heading--letter-spacing: var(--text-heading-xxl--letter-spacing);
  --text-xx-large-heading--font-weight: var(--text-heading-xxl--font-weight);
  --text-x-large-heading: var(--text-heading-xl);
  --text-x-large-heading--line-height: var(--text-heading-xl--line-height);
  --text-x-large-heading--letter-spacing: var(--text-heading-xl--letter-spacing);
  --text-x-large-heading--font-weight: var(--text-heading-xl--font-weight);
  --text-large-heading: var(--text-heading-l);
  --text-large-heading--line-height: var(--text-heading-l--line-height);
  --text-large-heading--letter-spacing: var(--text-heading-l--letter-spacing);
  --text-large-heading--font-weight: var(--text-heading-l--font-weight);
  --text-medium-heading: var(--text-heading-m);
  --text-medium-heading--line-height: var(--text-heading-m--line-height);
  --text-medium-heading--letter-spacing: var(--text-heading-m--letter-spacing);
  --text-medium-heading--font-weight: var(--text-heading-m--font-weight);
  --text-small-heading: var(--text-heading-s);
  --text-small-heading--line-height: var(--text-heading-s--line-height);
  --text-small-heading--letter-spacing: var(--text-heading-s--letter-spacing);
  --text-small-heading--font-weight: var(--text-heading-s--font-weight);
  --text-x-small-heading: var(--text-heading-xs);
  --text-x-small-heading--line-height: var(--text-heading-xs--line-height);
  --text-x-small-heading--letter-spacing: var(--text-heading-xs--letter-spacing);
  --text-x-small-heading--font-weight: var(--text-heading-xs--font-weight);
  --text-xx-small-heading: var(--text-heading-xxs);
  --text-xx-small-heading--line-height: var(--text-heading-xxs--line-height);
  --text-xx-small-heading--letter-spacing: var(--text-heading-xxs--letter-spacing);
  --text-xx-small-heading--font-weight: var(--text-heading-xxs--font-weight);
  --text-xx-large-label: var(--text-label-xxl);
  --text-xx-large-label--line-height: var(--text-label-xxl--line-height);
  --text-xx-large-label--letter-spacing: var(--text-label-xxl--letter-spacing);
  --text-xx-large-label--font-weight: var(--text-label-xxl--font-weight);
  --text-x-large-label: var(--text-label-xl);
  --text-x-large-label--line-height: var(--text-label-xl--line-height);
  --text-x-large-label--letter-spacing: var(--text-label-xl--letter-spacing);
  --text-x-large-label--font-weight: var(--text-label-xl--font-weight);
  --text-large-label: var(--text-label-l);
  --text-large-label--line-height: var(--text-label-l--line-height);
  --text-large-label--letter-spacing: var(--text-label-l--letter-spacing);
  --text-large-label--font-weight: var(--text-label-l--font-weight);
  --text-medium-label: var(--text-label-m);
  --text-medium-label--line-height: var(--text-label-m--line-height);
  --text-medium-label--letter-spacing: var(--text-label-m--letter-spacing);
  --text-medium-label--font-weight: var(--text-label-m--font-weight);
  --text-small-label: var(--text-label-s);
  --text-small-label--line-height: var(--text-label-s--line-height);
  --text-small-label--letter-spacing: var(--text-label-s--letter-spacing);
  --text-small-label--font-weight: var(--text-label-s--font-weight);
  --text-x-small-label: var(--text-label-xs);
  --text-x-small-label--line-height: var(--text-label-xs--line-height);
  --text-x-small-label--letter-spacing: var(--text-label-xs--letter-spacing);
  --text-x-small-label--font-weight: var(--text-label-xs--font-weight);
  --text-xx-small-label: var(--text-label-xxs);
  --text-xx-small-label--line-height: var(--text-label-xxs--line-height);
  --text-xx-small-label--letter-spacing: var(--text-label-xxs--letter-spacing);
  --text-xx-small-label--font-weight: var(--text-label-xxs--font-weight);
  --text-x-small-label-caps: var(--text-label-caps-xxs);
  --text-x-small-label-caps--line-height: var(--text-label-caps-xxs--line-height);
  --text-x-small-label-caps--letter-spacing: var(--text-label-caps-xxs--letter-spacing);
  --text-x-small-label-caps--font-weight: var(--text-label-caps-xxs--font-weight);
  --text-x-small-uppercase: var(--text-label-caps-xs);
  --text-x-small-uppercase--line-height: var(--text-label-caps-xs--line-height);
  --text-x-small-uppercase--letter-spacing: var(--text-label-caps-xs--letter-spacing);
  --text-x-small-uppercase--font-weight: var(--text-label-caps-xs--font-weight);
  --text-large-uppercase: var(--text-label-caps-l);
  --text-large-uppercase--line-height: var(--text-label-caps-l--line-height);
  --text-large-uppercase--letter-spacing: var(--text-label-caps-l--letter-spacing);
  --text-large-uppercase--font-weight: var(--text-label-caps-l--font-weight);
  --text-x-large-uppercase: var(--text-label-caps-xl);
  --text-x-large-uppercase--line-height: var(--text-label-caps-xl--line-height);
  --text-x-large-uppercase--letter-spacing: var(--text-label-caps-xl--letter-spacing);
  --text-x-large-uppercase--font-weight: var(--text-label-caps-xl--font-weight);
  --text-xx-large-uppercase: var(--text-label-caps-xxl);
  --text-xx-large-uppercase--line-height: var(--text-label-caps-xxl--line-height);
  --text-xx-large-uppercase--letter-spacing: var(--text-label-caps-xxl--letter-spacing);
  --text-xx-large-uppercase--font-weight: var(--text-label-caps-xxl--font-weight);
  --text-xx-large-paragraph: var(--text-paragraph-xxl);
  --text-xx-large-paragraph--line-height: var(--text-paragraph-xxl--line-height);
  --text-xx-large-paragraph--letter-spacing: var(--text-paragraph-xxl--letter-spacing);
  --text-xx-large-paragraph--font-weight: var(--text-paragraph-xxl--font-weight);
  --text-x-large-paragraph: var(--text-paragraph-xl);
  --text-x-large-paragraph--line-height: var(--text-paragraph-xl--line-height);
  --text-x-large-paragraph--letter-spacing: var(--text-paragraph-xl--letter-spacing);
  --text-x-large-paragraph--font-weight: var(--text-paragraph-xl--font-weight);
  --text-large-paragraph: var(--text-paragraph-l);
  --text-large-paragraph--line-height: var(--text-paragraph-l--line-height);
  --text-large-paragraph--letter-spacing: var(--text-paragraph-l--letter-spacing);
  --text-large-paragraph--font-weight: var(--text-paragraph-l--font-weight);
  --text-medium-paragraph: var(--text-paragraph-m);
  --text-medium-paragraph--line-height: var(--text-paragraph-m--line-height);
  --text-medium-paragraph--letter-spacing: var(--text-paragraph-m--letter-spacing);
  --text-medium-paragraph--font-weight: var(--text-paragraph-m--font-weight);
  --text-small-paragraph: var(--text-paragraph-s);
  --text-small-paragraph--line-height: var(--text-paragraph-s--line-height);
  --text-small-paragraph--letter-spacing: var(--text-paragraph-s--letter-spacing);
  --text-small-paragraph--font-weight: var(--text-paragraph-s--font-weight);
  --text-x-small-paragraph: var(--text-paragraph-xs);
  --text-x-small-paragraph--line-height: var(--text-paragraph-xs--line-height);
  --text-x-small-paragraph--letter-spacing: var(--text-paragraph-xs--letter-spacing);
  --text-x-small-paragraph--font-weight: var(--text-paragraph-xs--font-weight);
  --text-xx-small-paragraph: var(--text-paragraph-xxs);
  --text-xx-small-paragraph--line-height: var(--text-paragraph-xxs--line-height);
  --text-xx-small-paragraph--letter-spacing: var(--text-paragraph-xxs--letter-spacing);
  --text-xx-small-paragraph--font-weight: var(--text-paragraph-xxs--font-weight);
  --text-xx-small-italic: var(--text-paragraph-em-xxs);
  --text-xx-small-italic--line-height: var(--text-paragraph-em-xxs--line-height);
  --text-xx-small-italic--letter-spacing: var(--text-paragraph-em-xxs--letter-spacing);
  --text-xx-small-italic--font-weight: var(--text-paragraph-em-xxs--font-weight);
  --text-x-small-underline: var(--text-link-xs);
  --text-x-small-underline--line-height: var(--text-link-xs--line-height);
  --text-x-small-underline--letter-spacing: var(--text-link-xs--letter-spacing);
  --text-x-small-underline--font-weight: var(--text-link-xs--font-weight);
  --text-small-underline: var(--text-link-s);
  --text-small-underline--line-height: var(--text-link-s--line-height);
  --text-small-underline--letter-spacing: var(--text-link-s--letter-spacing);
  --text-small-underline--font-weight: var(--text-link-s--font-weight);
  --text-medium-underline: var(--text-link-m);
  --text-medium-underline--line-height: var(--text-link-m--line-height);
  --text-medium-underline--letter-spacing: var(--text-link-m--letter-spacing);
  --text-medium-underline--font-weight: var(--text-link-m--font-weight);
  --text-large-underline: var(--text-link-l);
  --text-large-underline--line-height: var(--text-link-l--line-height);
  --text-large-underline--letter-spacing: var(--text-link-l--letter-spacing);
  --text-large-underline--font-weight: var(--text-link-l--font-weight);
  --text-x-large-underline: var(--text-link-xl);
  --text-x-large-underline--line-height: var(--text-link-xl--line-height);
  --text-x-large-underline--letter-spacing: var(--text-link-xl--letter-spacing);
  --text-x-large-underline--font-weight: var(--text-link-xl--font-weight);

}

@layer utilities {
  .text-x-small-heading {
    font-size: var(--text-x-small-heading);
    line-height: var(--text-x-small-heading--line-height);
    font-weight: var(--text-x-small-heading--font-weight);
    letter-spacing: var(--text-x-small-heading--letter-spacing);
  }
  .text-x-small-paragraph {
    font-size: var(--text-x-small-paragraph);
    line-height: var(--text-x-small-paragraph--line-height);
    font-weight: var(--text-x-small-paragraph--font-weight);
    letter-spacing: var(--text-x-small-paragraph--letter-spacing);
  }
  .text-paragraph-em-m,
  .text-paragraph-em-xxs,
  .paragraph-em-xxs {
    font-style: italic;
  }
}

@layer components {
  .xx-large-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-xx-large-display);
    font-weight: var(--text-xx-large-display--font-weight);
    line-height: var(--text-xx-large-display--line-height);
    letter-spacing: var(--text-xx-large-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-large-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-xx-large-heading);
    font-weight: var(--text-xx-large-heading--font-weight);
    line-height: var(--text-xx-large-heading--line-height);
    letter-spacing: var(--text-xx-large-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-x-large-heading);
    font-weight: var(--text-x-large-heading--font-weight);
    line-height: var(--text-x-large-heading--line-height);
    letter-spacing: var(--text-x-large-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-large-heading);
    font-weight: var(--text-large-heading--font-weight);
    line-height: var(--text-large-heading--line-height);
    letter-spacing: var(--text-large-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-medium-heading);
    font-weight: var(--text-medium-heading--font-weight);
    line-height: var(--text-medium-heading--line-height);
    letter-spacing: var(--text-medium-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-small-heading);
    font-weight: var(--text-small-heading--font-weight);
    line-height: var(--text-small-heading--line-height);
    letter-spacing: var(--text-small-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-x-small-heading);
    font-weight: var(--text-x-small-heading--font-weight);
    line-height: var(--text-x-small-heading--line-height);
    letter-spacing: var(--text-x-small-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-label {
    font-family: var(--font-inter);
    font-size: var(--text-large-label);
    font-weight: var(--text-large-label--font-weight);
    line-height: var(--text-large-label--line-height);
    letter-spacing: var(--text-large-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-label {
    font-family: var(--font-inter);
    font-size: var(--text-medium-label);
    font-weight: var(--text-medium-label--font-weight);
    line-height: var(--text-medium-label--line-height);
    letter-spacing: var(--text-medium-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-label {
    font-family: var(--font-inter);
    font-size: var(--text-small-label);
    font-weight: var(--text-small-label--font-weight);
    line-height: var(--text-small-label--line-height);
    letter-spacing: var(--text-small-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  /* Regular 400 */
  .large-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-large-paragraph);
    font-weight: var(--text-large-paragraph--font-weight);
    line-height: var(--text-large-paragraph--line-height);
    letter-spacing: var(--text-large-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-medium-paragraph);
    font-weight: var(--text-medium-paragraph--font-weight);
    line-height: var(--text-medium-paragraph--line-height);
    letter-spacing: var(--text-medium-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-small-paragraph);
    font-weight: var(--text-small-paragraph--font-weight);
    line-height: var(--text-small-paragraph--line-height);
    letter-spacing: var(--text-small-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-paragraph);
    font-weight: var(--text-x-small-paragraph--font-weight);
    line-height: var(--text-x-small-paragraph--line-height);
    letter-spacing: var(--text-x-small-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-label {
    font-family: var(--font-inter);
    font-size: var(--text-xx-small-label);
    font-weight: var(--text-xx-small-label--font-weight);
    line-height: var(--text-xx-small-label--line-height);
    letter-spacing: var(--text-xx-small-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-xx-small-paragraph);
    font-weight: var(--text-xx-small-paragraph--font-weight);
    line-height: var(--text-xx-small-paragraph--line-height);
    letter-spacing: var(--text-xx-small-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-italic {
    font-family: var(--font-inter);
    font-style: italic;
    font-size: var(--text-xx-small-italic);
    font-weight: var(--text-xx-small-italic--font-weight);
    line-height: var(--text-xx-small-italic--line-height);
    letter-spacing: var(--text-xx-small-italic--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-label {
    font-family: var(--font-inter);
    font-size: var(--text-x-large-label);
    font-weight: var(--text-x-large-label--font-weight);
    line-height: var(--text-x-large-label--line-height);
    letter-spacing: var(--text-x-large-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-x-large-paragraph);
    font-weight: var(--text-x-large-paragraph--font-weight);
    line-height: var(--text-x-large-paragraph--line-height);
    letter-spacing: var(--text-x-large-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-large-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-xx-large-paragraph);
    font-weight: var(--text-xx-large-paragraph--font-weight);
    line-height: var(--text-xx-large-paragraph--line-height);
    letter-spacing: var(--text-xx-large-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-large-label {
    font-family: var(--font-inter);
    font-size: var(--text-xx-large-label);
    font-weight: var(--text-xx-large-label--font-weight);
    line-height: var(--text-xx-large-label--line-height);
    letter-spacing: var(--text-xx-large-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-underline {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-underline);
    font-weight: var(--text-x-small-underline--font-weight);
    line-height: var(--text-x-small-underline--line-height);
    letter-spacing: var(--text-x-small-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-underline {
    font-family: var(--font-inter);
    font-size: var(--text-small-underline);
    font-weight: var(--text-small-underline--font-weight);
    line-height: var(--text-small-underline--line-height);
    letter-spacing: var(--text-small-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-underline {
    font-family: var(--font-inter);
    font-size: var(--text-medium-underline);
    font-weight: var(--text-medium-underline--font-weight);
    line-height: var(--text-medium-underline--line-height);
    letter-spacing: var(--text-medium-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-underline {
    font-family: var(--font-inter);
    font-size: var(--text-large-underline);
    font-weight: var(--text-large-underline--font-weight);
    line-height: var(--text-large-underline--line-height);
    letter-spacing: var(--text-large-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-underline {
    font-family: var(--font-inter);
    font-size: var(--text-x-large-underline);
    font-weight: var(--text-x-large-underline--font-weight);
    line-height: var(--text-x-large-underline--line-height);
    letter-spacing: var(--text-x-large-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-label {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-label);
    font-weight: var(--text-x-small-label--font-weight);
    line-height: var(--text-x-small-label--line-height);
    letter-spacing: var(--text-x-small-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-label-caps {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-label-caps);
    font-weight: var(--text-x-small-label-caps--font-weight);
    line-height: var(--text-x-small-label-caps--line-height);
    letter-spacing: var(--text-x-small-label-caps--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-xx-small-heading);
    font-weight: var(--text-xx-small-heading--font-weight);
    line-height: var(--text-xx-small-heading--line-height);
    letter-spacing: var(--text-xx-small-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-x-small-display);
    font-weight: var(--text-x-small-display--font-weight);
    line-height: var(--text-x-small-display--line-height);
    letter-spacing: var(--text-x-small-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-uppercase {
    font-family: var(--font-inter);
    font-size: var(--text-x-large-uppercase);
    font-weight: var(--text-x-large-uppercase--font-weight);
    line-height: var(--text-x-large-uppercase--line-height);
    letter-spacing: var(--text-x-large-uppercase--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-large-uppercase {
    font-family: var(--font-inter);
    font-size: var(--text-xx-large-uppercase);
    font-weight: var(--text-xx-large-uppercase--font-weight);
    line-height: var(--text-xx-large-uppercase--line-height);
    letter-spacing: var(--text-xx-large-uppercase--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-x-large-display);
    font-weight: var(--text-x-large-display--font-weight);
    line-height: var(--text-x-large-display--line-height);
    letter-spacing: var(--text-x-large-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-large-display);
    font-weight: var(--text-large-display--font-weight);
    line-height: var(--text-large-display--line-height);
    letter-spacing: var(--text-large-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-medium-display);
    font-weight: var(--text-medium-display--font-weight);
    line-height: var(--text-medium-display--line-height);
    letter-spacing: var(--text-medium-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-xx-small-display);
    font-weight: var(--text-xx-small-display--font-weight);
    line-height: var(--text-xx-small-display--line-height);
    letter-spacing: var(--text-xx-small-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-uppercase {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-uppercase);
    font-weight: var(--text-x-small-uppercase--font-weight);
    line-height: var(--text-x-small-uppercase--line-height);
    letter-spacing: var(--text-x-small-uppercase--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-uppercase {
    font-family: var(--font-inter);
    font-size: var(--text-large-uppercase);
    font-weight: var(--text-large-uppercase--font-weight);
    line-height: var(--text-large-uppercase--line-height);
    letter-spacing: var(--text-large-uppercase--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-small-display);
    font-weight: var(--text-small-display--font-weight);
    line-height: var(--text-small-display--line-height);
    letter-spacing: var(--text-small-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .paragraph-strong-xxl {
    font-family: var(--font-inter);
    font-size: var(--text-paragraph-strong-xxl);
    font-weight: var(--text-paragraph-strong-xxl--font-weight);
    line-height: var(--text-paragraph-strong-xxl--line-height);
    letter-spacing: var(--text-paragraph-strong-xxl--letter-spacing);
  }
  .paragraph-strong-xl {
    font-family: var(--font-inter);
    font-size: var(--text-paragraph-strong-xl);
    font-weight: var(--text-paragraph-strong-xl--font-weight);
    line-height: var(--text-paragraph-strong-xl--line-height);
    letter-spacing: var(--text-paragraph-strong-xl--letter-spacing);
  }
  .paragraph-strong-l {
    font-family: var(--font-inter);
    font-size: var(--text-paragraph-strong-l);
    font-weight: var(--text-paragraph-strong-l--font-weight);
    line-height: var(--text-paragraph-strong-l--line-height);
    letter-spacing: var(--text-paragraph-strong-l--letter-spacing);
  }
  .paragraph-strong-m {
    font-family: var(--font-inter);
    font-size: var(--text-paragraph-strong-m);
    font-weight: var(--text-paragraph-strong-m--font-weight);
    line-height: var(--text-paragraph-strong-m--line-height);
    letter-spacing: var(--text-paragraph-strong-m--letter-spacing);
  }
  .paragraph-strong-s {
    font-family: var(--font-inter);
    font-size: var(--text-paragraph-strong-s);
    font-weight: var(--text-paragraph-strong-s--font-weight);
    line-height: var(--text-paragraph-strong-s--line-height);
    letter-spacing: var(--text-paragraph-strong-s--letter-spacing);
  }
  .paragraph-strong-xs {
    font-family: var(--font-inter);
    font-size: var(--text-paragraph-strong-xs);
    font-weight: var(--text-paragraph-strong-xs--font-weight);
    line-height: var(--text-paragraph-strong-xs--line-height);
    letter-spacing: var(--text-paragraph-strong-xs--letter-spacing);
  }
  .paragraph-strong-xxs {
    font-family: var(--font-inter);
    font-size: var(--text-paragraph-strong-xxs);
    font-weight: var(--text-paragraph-strong-xxs--font-weight);
    line-height: var(--text-paragraph-strong-xxs--line-height);
    letter-spacing: var(--text-paragraph-strong-xxs--letter-spacing);
  }
  .paragraph-em-m {
    font-family: var(--font-inter);
    font-style: italic;
    font-size: var(--text-paragraph-em-m);
    font-weight: var(--text-paragraph-em-m--font-weight);
    line-height: var(--text-paragraph-em-m--line-height);
    letter-spacing: var(--text-paragraph-em-m--letter-spacing);
  }
}