@import 'tailwindcss';
@source "../node_modules/streamdown/dist/*.js";

@font-face {
  font-family: 'GT Super Light';
  src: url('/fonts/gt-super-display-light.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GT Super Light';
  src: url('/fonts/gt-super-display-light-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

@media (max-width: 760px) {
  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
}

/* Track */
::-webkit-scrollbar-track {
  display: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #626d6d;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
  color: transparent;
}

/* View Transition: cross-fade between pages */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
  animation-timing-function: ease-in-out;
}

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

ul {
  list-style-type: disc;
}

::selection {
  background: #e1ede5;
}

/* Mobile app disable text selection */
.mobile-app *:not(input):not(textarea):not(select) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@theme {
  --*: initial;

  /* DesignSystemColors */
  --color-green-900: #052619;
  --color-green-800: #053723;
  --color-green-700: #03524d;
  --color-green-600: #137153;
  --color-green-500: #35be8f;
  --color-green-400: #61a281;
  --color-green-300: #8bbca3;
  --color-green-200: #b2cdc1;
  --color-green-100: #e5f7ef;
  --color-green-transparent: rgba(53, 190, 143, 0.2);

  --color-teal-700: #5d968f;
  --color-teal-600: #4ca690;
  --color-teal-500: #75bdb6;
  --color-teal-400: #9fc5c1;
  --color-teal-300: #bfd9d6;
  --color-teal-200: #d9e5e4;
  --color-teal-100: #e2eee8;

  --color-dark-grey-400: #262c2f;
  --color-dark-grey-300: #3e4444;
  --color-dark-grey-150: #6a7070;
  --color-dark-grey-200: #585e5e;
  --color-dark-grey-100: #878790;
  --color-dark-grey-black: #000000;

  --color-medium-grey-300: #9a9ea0;
  --color-medium-grey-200: #bbbcc0;
  --color-medium-grey-100: #dddedf;

  --color-light-grey-400: #e7e8ea;
  --color-light-grey-300: #ededed;
  --color-light-grey-200: #f4f4f4;
  --color-light-grey-100: #f8f9f9;
  --color-light-grey-white: #fff;
  --color-light-grey-white05: #ffffff99;
  --color-light-grey-white1: #ffffff60;
  --color-light-grey-white2: #ffffff50;
  --color-light-grey-white3: #ffffff25;
  --color-light-grey-white4: #ffffff10;
  --color-highlight: #f5ac29;

  --color-red-500: #d82e2e;
  --color-red-400: #ff6262;
  --color-red-300: #f49b96;
  --color-red-200: #ffdbdb;
  --color-red-100: #fbf0f0;

  --color-gold-800: #8d3606;
  --color-gold-700: #b56a24;
  --color-gold-600: #d49d6a;
  --color-gold-500: #d4ad5a;
  --color-gold-450: #e3bd81;
  --color-gold-400: #f5dba3;
  --color-gold-300: #edd2b9;
  --color-gold-200: #f9efe7;
  --color-gold-100: #fcf4e3;

  --color-blue-500: #245ac3;
  --color-blue-400: #8aaced;
  --color-blue-300: #cbd7ef;
  --color-blue-200: #e0ebff;
  --color-blue-100: #ebf2ff;

  --color-whatsapp-green: #20aa39;

  --spacing: 4px;

  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 15px;
  --blur-xl: 20px;
  --blur-2xl: 25px;
  --blur-3xl: 30px;

  --font-sans: 'Inter', sans-serif;
  --font-header: 'GT Super Light', sans-serif;

  --breakpoint-xs: 0;
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1025px;
  --breakpoint-xl: 1440px;

  --max-width-container: 500px;
  --width-container: 500px;

  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;

  /* color tokens */
  --color-brand-primary: var(--color-green-900);
  --color-brand-secondary: var(--color-green-600);
  --color-brand-contrast: var(--color-green-500);
  --color-brand-inverted: var(--color-light-grey-white);

  --color-drawer-hover: var(--color-teal-100);

  --color-button-primary-default: var(--color-green-900);
  --color-button-primary-hover: var(--color-green-600);
  --color-button-primary-focussed: var(--color-green-700);
  --color-button-primary-loading: var(--color-green-900);
  --color-button-primary-disabled: var(--color-medium-grey-200);
  --color-button-primary-error: var(--color-red-500);
  --color-button-primary-warning: var(--color-gold-500);
  --color-button-primary-inverted: var(--color-light-grey-white);
  --color-button-primary-inverted-hover: var(--color-green-500);

  --color-button-primary-inverted-default: var(--color-light-grey-white);
  --color-button-primary-inverted-hover: var(--color-green-500);
  --color-button-primary-inverted-focussed: var(--color-green-300);
  --color-button-primary-inverted-loading: var(--color-light-grey-white);
  --color-button-primary-inverted-disabled: var(--color-dark-grey-100);
  --color-button-primary-inverted-error: var(--color-red-400);
  --color-button-primary-inverted-inverted: var(--color-green-900);

  --color-button-secondary-default: var(--color-green-900);
  --color-button-secondary-default-fill: transparent;
  --color-button-secondary-hover: var(--color-green-600);
  --color-button-secondary-hover-fill: var(--color-green-100);
  --color-button-secondary-focussed: var(--color-green-700);
  --color-button-secondary-focussed-fill: var(--color-green-100);
  --color-button-secondary-loading: var(--color-light-grey-white);
  --color-button-secondary-disabled: var(--color-medium-grey-200);

  --color-button-secondary-inverted-default: var(--color-light-grey-white);
  --color-button-secondary-inverted-default-fill: transparent;
  --color-button-secondary-inverted-hover: var(--color-green-600);
  --color-button-secondary-inverted-hover-fill: var(--color-green-100);
  --color-button-secondary-inverted-focussed: var(--color-green-700);
  --color-button-secondary-inverted-focussed-fill: var(--color-green-100);
  --color-button-secondary-inverted-loading: var(--color-light-grey-white);
  --color-button-secondary-inverted-disabled: var(--color-medium-grey-200);

  --color-button-tertiary-inverted-default: var(--color-light-grey-white);
  --color-button-tertiary-inverted-hover-fill: var(--color-green-800);
  --color-button-tertiary-inverted-hover: var(--color-green-500);
  --color-button-tertiary-inverted-focussed-fill: var(--color-green-700);
  --color-button-tertiary-inverted-loading: var(--color-green-900);
  --color-button-tertiary-inverted-disabled: var(--color-dark-grey-100);

  --color-button-icon-default: var(--color-dark-grey-400);
  --color-button-icon-default-fill: transparent;
  --color-button-icon-hover: var(--color-green-600);
  --color-button-icon-hover-fill: var(--color-green-100);
  --color-button-icon-focussed: var(--color-green-700);
  --color-button-icon-focussed-fill: var(--color-green-100);
  --color-button-icon-disabled: var(--color-medium-grey-300);
  --color-button-icon-disabled-fill: var(--color-light-grey-200);

  --color-tags-warning-fill: var(--color-gold-100);
  --color-tags-warning-text: var(--color-gold-700);
  --color-tags-info-fill: var(--color-blue-100);
  --color-tags-info-text: var(--color-blue-500);
  --color-tags-error-fill: var(--color-red-100);
  --color-tags-error-text: var(--color-red-500);
  --color-tags-success-fill: var(--color-green-100);
  --color-tags-success-text: var(--color-green-600);
  --color-tags-disabled-fill: var(--color-light-grey-300);
  --color-tags-disabled-text: var(--color-dark-grey-400);
  --color-tags-translucent-fill: var(--color-light-grey-white2);

  --color-text-primary: var(--color-dark-grey-400);
  --color-text-secondary: var(--color-dark-grey-150);
  --color-text-tertiary: var(--color-dark-grey-100);
  --color-text-inactive: var(--color-medium-grey-200);
  --color-text-link: var(--color-green-700);
  --color-text-inverted: var(--color-light-grey-white);
  --color-text-inverted2: var(--color-light-grey-white05);
  --color-text-error: var(--color-red-500);
  --color-text-warning: var(--color-gold-700);
  --color-text-warning-light: var(--color-gold-600);
  --color-text-positive-decimal: var(--color-green-400);
  --color-text-success: var(--color-green-500);
  --color-text-highlight: var(--color-highlight);

  --color-surface-primary: var(--color-light-grey-white);
  --color-surface-minimal: var(--color-light-grey-100);
  --color-surface-secondary: var(--color-light-grey-200);
  --color-surface-tertiary: var(--color-light-grey-300);
  --color-surface-contrast: var(--color-medium-grey-200);
  --color-surface-heavy-contrast: var(--color-dark-grey-150);
  --color-surface-invert: var(--color-green-900);
  --color-surface-dark: var(--color-green-900);
  --color-surface-error: var(--color-red-100);
  --color-surface-warning: var(--color-gold-100);
  --color-surface-black: var(--color-dark-grey-black);
  --color-surface-primary-semi-transparent: var(--color-light-grey-white2);

  --color-surface-neutral-primary: var(--color-light-grey-white);
  --color-surface-neutral-minimal: var(--color-light-grey-100);
  --color-surface-neutral-secondary: var(--color-light-grey-200);
  --color-surface-neutral-tertiary: var(--color-light-grey-300);
  --color-surface-neutral-contrast: var(--color-medium-grey-200);
  --color-surface-neutral-heavy-contrast: var(--color-dark-grey-150);
  --color-surface-neutral-invert-green: var(--color-green-900);
  --color-surface-neutral-invert-black: var(--color-dark-grey-black);
  --color-surface-neutral-white-transparent: var(--color-light-grey-white3);
  --color-surface-neutral-white-transparent2: var(--color-light-grey-white4);

  --color-surface-green-primary: var(--color-green-100);
  --color-surface-green-minimal: var(--color-teal-200);
  --color-surface-green-secondary: var(--color-green-200);
  --color-surface-green-contrast: var(--color-teal-600);
  --color-surface-green-heavy-contrast: var(--color-green-700);
  --color-surface-green-medium-contrast: var(--color-teal-700);
  --color-surface-green-invert: var(--color-green-900);
  --color-surface-green-transparent: var(--color-green-transparent);

  --color-surface-gold-primary: var(--color-gold-200);
  --color-surface-gold-minimal: var(--color-gold-300);
  --color-surface-gold-secondary: var(--color-gold-400);
  --color-surface-gold-contrast: var(--color-gold-500);
  --color-surface-gold-heavy-contrast: var(--color-gold-600);
  --color-surface-gold-invert: var(--color-gold-700);

  --color-surface-blue-primary: var(--color-blue-100);
  --color-surface-blue-minimal-light: var(--color-blue-200);
  --color-surface-blue-minimal: var(--color-blue-300);
  --color-surface-blue-secondary: var(--color-blue-400);
  --color-surface-blue-invert: var(--color-blue-500);

  --color-border-successful: var(--color-green-300);
  --color-border-warning: var(--color-gold-300);

  --color-data-visualization-1-icon: var(--color-green-700);
  --color-data-visualization-1-fill: var(--color-teal-200);
  --color-data-visualization-2-icon: var(--color-green-500);
  --color-data-visualization-2-fill: var(--color-green-100);
  --color-data-visualization-3-icon: var(--color-gold-500);
  --color-data-visualization-3-fill: var(--color-gold-100);
  --color-data-visualization-4-icon: var(--color-blue-300);
  --color-data-visualization-4-fill: var(--color-blue-100);
  --color-data-visualization-5-icon: var(--color-red-300);
  --color-data-visualization-5-fill: var(--color-red-100);
  --color-data-visualization-6-icon: var(--color-blue-500);
  --color-data-visualization-6-fill: var(--color-blue-100);
  --color-data-visualization-7-icon: var(--color-gold-600);
  --color-data-visualization-7-fill: var(--color-gold-200);
  --color-data-visualization-8-icon: var(--color-teal-500);
  --color-data-visualization-8-fill: var(--color-teal-100);
  --color-data-visualization-9-icon: var(--color-green-400);
  --color-data-visualization-9-fill: var(--color-green-100);
  --color-data-visualization-10-icon: var(--color-medium-grey-200);
  --color-data-visualization-10-fill: var(--color-light-grey-200);

  --color-avatar-theme01-fill: var(--color-teal-200);
  --color-avatar-theme01-icon: var(--color-green-700);
  --color-avatar-theme02-fill: var(--color-green-100);
  --color-avatar-theme02-icon: var(--color-green-500);
  --color-avatar-theme03-fill: var(--color-gold-100);
  --color-avatar-theme03-icon: var(--color-gold-450);
  --color-avatar-theme04-fill: var(--color-blue-100);
  --color-avatar-theme04-icon: var(--color-blue-400);
  --color-avatar-theme05-fill: var(--color-red-100);
  --color-avatar-theme05-icon: var(--color-red-300);
  --color-avatar-theme06-fill: var(--color-blue-100);
  --color-avatar-theme06-icon: var(--color-blue-500);
  --color-avatar-theme07-fill: var(--color-gold-200);
  --color-avatar-theme07-icon: var(--color-gold-600);
  --color-avatar-theme08-fill: var(--color-teal-100);
  --color-avatar-theme08-icon: var(--color-teal-500);
  --color-avatar-theme09-fill: var(--color-green-100);
  --color-avatar-theme09-icon: var(--color-green-400);
  --color-avatar-theme10-fill: var(--color-light-grey-200);
  --color-avatar-theme10-icon: var(--color-medium-grey-200);

  --color-stroke-error: var(--color-red-300);
  --color-stroke-warning: var(--color-gold-400);

  --color-stroke-neutral-primary: var(--color-light-grey-300);
  --color-stroke-neutral-minimal: var(--color-medium-grey-100);
  --color-stroke-neutral-secondary: var(--color-medium-grey-200);
  --color-stroke-neutral-contrast: var(--color-dark-grey-100);
  --color-stroke-neutral-heavy-contrast: var(--color-dark-grey-300);
  --color-stroke-neutral-invert: var(--color-dark-grey-black);

  --color-stroke-green-primary: var(--color-green-200);
  --color-stroke-green-minimal: var(--color-teal-300);
  --color-stroke-green-secondary: var(--color-green-300);
  --color-stroke-green-contrast: var(--color-green-500);
  --color-stroke-green-heavy-contrast: var(--color-green-700);
  --color-stroke-green-invert: var(--color-green-700);

  --color-icon-primary: var(--color-green-900);
  --color-icon-secondary: var(--color-dark-grey-150);
  --color-icon-tertiary: var(--color-dark-grey-100);
  --color-icon-inactive: var(--color-medium-grey-200);
  --color-icon-hover: var(--color-green-600);
  --color-icon-focussed: var(--color-green-700);
  --color-icon-error: var(--color-red-500);
  --color-icon-warning: var(--color-gold-700);
  --color-icon-inverted: var(--color-light-grey-white);

  --color-divider-low-contrast: var(--color-light-grey-300);
  --color-divider-medium-contrast: var(--color-medium-grey-100);
  --color-divider-high-contrast: var(--color-medium-grey-300);

  --color-card-type1: var(--color-green-900);
  --color-card-type2: var(--color-green-700);
  --color-card-type3: var(--color-green-200);
  --color-card-type4: var(--color-teal-300);
  --color-card-type5: var(--color-teal-200);
  --color-card-type6: var(--color-gold-200);

  --color-private-market-card-type1-background: var(--color-green-900);
  --color-private-market-card-type1-text-header: var(--color-light-grey-white);
  --color-private-market-card-type1-text-body: var(--color-medium-grey-200);

  --color-private-market-card-type2-background: var(--color-green-700);
  --color-private-market-card-type2-text-header: var(--color-light-grey-white);
  --color-private-market-card-type2-text-body: var(--color-medium-grey-200);

  --color-private-market-card-type3-background: var(--color-teal-300);
  --color-private-market-card-type3-text-header: var(--color-dark-grey-400);
  --color-private-market-card-type3-text-body: var(--color-dark-grey-150);

  --color-progress-bar-background: var(--color-medium-grey-100);
  --color-progress-bar-background-light: var(--color-light-grey-400);
  --color-progress-bar-default: var(--color-green-900);
}

@utility typography-header1 {
  font-family: var(--font-header);
  font-size: 56px;
  font-style: normal;
  font-weight: 300;
  line-height: calc(60 / 56);
  -webkit-text-stroke: 0.7;
}

@utility typography-header1-italic {
  font-family: var(--font-header);
  font-size: 56px;
  font-style: italic;
  font-weight: 300;
  line-height: calc(60 / 56);
  -webkit-text-stroke: 0.7;
}

@utility typography-header2 {
  font-family: var(--font-header);
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  line-height: calc(56 / 48);
  -webkit-text-stroke: 0.6;
}

@utility typography-header2-italic {
  font-family: var(--font-header);
  font-size: 48px;
  font-style: italic;
  font-weight: 300;
  line-height: calc(56 / 48);
  -webkit-text-stroke: 0.6;
}

@utility typography-header3 {
  font-family: var(--font-header);
  font-size: 40px;
  font-style: normal;
  font-weight: 300;
  line-height: calc(48 / 40);
  -webkit-text-stroke: 0.5;
}

@utility typography-header3-italic {
  font-family: var(--font-header);
  font-size: 40px;
  font-style: italic;
  font-weight: 300;
  line-height: calc(48 / 40);
  -webkit-text-stroke: 0.5;
}

@utility typography-header4 {
  font-family: var(--font-sans);
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(40 / 32);
}

@utility typography-header5 {
  font-family: var(--font-sans);
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(32 / 28);
}

@utility typography-header6 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(28 / 24);
}

@utility typography-header7 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(24 / 20);
}

@utility typography-header8 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(24 / 18);
}

@utility typography-body1 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(24 / 16);
}

@utility typography-body1-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(24 / 16);
}

@utility typography-body1-high-emphasis {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: calc(24 / 16);
}

@utility typography-body2 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(20 / 14);
}

@utility typography-body2-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(20 / 14);
}

@utility typography-body2-high-emphasis {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: calc(20 / 14);
}

@utility typography-body3 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(16 / 12);
}

@utility typography-body3-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(16 / 12);
}

@utility typography-body3-high-emphasis {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: calc(16 / 12);
}

@utility typography-label1 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(18 / 16);
}

@utility typography-label1-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(18 / 16);
}

@utility typography-label1-high-emphasis {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: calc(18 / 16);
}

@utility typography-label2 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(16 / 14);
}

@utility typography-label2-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(16 / 14);
}

@utility typography-label2-high-emphasis {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: calc(16 / 14);
}

@utility typography-label3 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(14 / 12);
}

@utility typography-label3-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(14 / 12);
}

@utility typography-label3-high-emphasis {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: calc(14 / 12);
}

@utility typography-label4 {
  font-family: var(--font-sans);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(12 / 10);
}

@utility typography-label4-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(12 / 10);
}

@utility typography-caption1 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(18 / 16);
  text-transform: uppercase;
}

@utility typography-caption2 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(16 / 14);
  text-transform: uppercase;
}

@utility typography-caption3 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(14 / 12);
  text-transform: uppercase;
}

@utility typography-button1 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(20 / 16);
}

@utility typography-button2 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(18 / 14);
}

@utility typography-button3 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(16 / 12);
}

@utility typography-num0 {
  font-family: var(--font-sans);
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(48 / 40);
}

@utility typography-num1 {
  font-family: var(--font-sans);
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(40 / 32);
}

@utility typography-num2 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(28 / 24);
}

@utility typography-num3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(24 / 20);
}

@utility typography-num4 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(20 / 18);
}

@utility typography-num5 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(18 / 16);
}

@utility typography-num6 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(16 / 14);
}

@utility typography-num7 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(14 / 12);
}

@utility typography-num8 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(12 / 11);
}

@utility typography-num9 {
  font-family: var(--font-sans);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(11 / 10);
}

@utility typography-link1 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(24 / 16);
  text-decoration-line: underline;
}

@utility typography-link1-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(20 / 16);
  text-decoration-line: underline;
}

@utility typography-link1-high-emphasis {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: calc(24 / 16);
  text-decoration-line: underline;
}

@utility typography-link2 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(20 / 14);
  text-decoration-line: underline;
}

@utility typography-link2-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(18 / 14);
  text-decoration-line: underline;
}

@utility typography-link2-high-emphasis {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: calc(20 / 14);
  text-decoration-line: underline;
}

@utility typography-link3 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: calc(16 / 12);
  text-decoration-line: underline;
}

@utility typography-link3-mid-emphasis {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: calc(16 / 12);
  text-decoration-line: underline;
}

@utility typography-link3-high-emphasis {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: calc(16 / 12);
  text-decoration-line: underline;
}

@utility radial-gradient {
  background: radial-gradient(80% 80% at 85.39% 141.07%, var(--green-100, #e5f7ef) 50%, #fff 80%);
}

@utility box-shadow {
  box-shadow:
    -1px -1px 15px 2px rgba(0, 0, 0, 0.03),
    1px 1px 15px 2px rgba(0, 0, 0, 0.03);
  &:hover:not(:disabled) {
    box-shadow:
      -1px -1px 15px 2px rgba(0, 0, 0, 0.05),
      1px 1px 15px 2px rgba(0, 0, 0, 0.05);
  }
}

@utility box-shadow-lg {
  box-shadow:
    -1px -1px 20px 5px rgba(0, 0, 0, 0.05),
    1px 1px 20px 5px rgba(0, 0, 0, 0.05);
}

@utility border-half-px {
  border-width: 0.5px;
}

@utility no-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
}