/* Maxbit design tokens — generated from Figma 'Landing Page'
   Layer 1 primitives are fixed. Layer 2 semantics flip with the theme.
   Rule: a foreground only flips if the surface under it flips. */

:root {
  /* ---- Layer 1: primitives (never theme-dependent) ---- */
  --color-asset-bitcoin: #F7931A;
  --color-asset-bnb: #F4BC25;
  --color-base-black: #0B0F0E;
  --color-base-off-white: #FCFCFC;
  --color-base-white: #FFFFFF;
  --color-gray-050: #F2F7F6;
  --color-gray-100: #F1F4F3;
  --color-gray-150: #F0F1F1;
  --color-gray-200: #E3E8E7;
  --color-gray-250: #E5E7EB;
  --color-gray-300: #CDD5D3;
  --color-gray-400: #DADADA;
  --color-gray-500: #898989;
  --color-gray-600: #697774;
  --color-gray-700: #4C5755;
  --color-gray-800: #343D3B;
  --color-gray-850: #1E2423;
  --color-gray-900: #141F1C;
  --color-gray-950: #0F1312;
  --color-green-100: #DEF3E4;
  --color-green-300: #42BE65;
  --color-green-500: #18813F;
  --color-green-700: #0E6B33;
  --color-green-900: #16301F;
  --color-mint-300: #6BFFE1;
  --color-mint-400: #35FFD5;
  --color-mint-500: #2DDFBA;
  --color-mint-600: #25B89B;
  --color-mint-900: #006652;
  --color-red-100: #FDE7E6;
  --color-red-300: #FF8389;
  --color-red-500: #D52C20;
  --color-red-700: #A81E15;
  --color-red-900: #3A1512;

  /* ---- Layer 2: semantics — light ---- */
  --asset-bnb: var(--color-asset-bnb);
  --asset-bitcoin: var(--color-asset-bitcoin);
  --background-accent: var(--color-mint-900);
  --background-canvas: var(--color-base-off-white);
  --background-surface-raised: var(--color-base-white);
  --background-surface: var(--color-base-white);
  --border-accent: var(--color-mint-400);
  --border-default: var(--color-gray-200);
  --border-inverse: var(--color-gray-800);
  --border-strong: var(--color-gray-300);
  --border-subtle: var(--color-gray-250);
  --button-accent-bg-hover: var(--color-gray-800);
  --button-accent-bg-pressed: var(--color-gray-900);
  --button-accent-bg: var(--color-gray-850);
  --button-accent-text: var(--color-mint-500);
  --button-chip-bg-hover: var(--color-gray-100);
  --button-chip-bg-pressed: var(--color-gray-200);
  --button-chip-border: var(--color-mint-500);
  --button-chip-text: var(--color-gray-850);
  --button-disabled-bg: var(--color-gray-200);
  --button-disabled-border: var(--color-gray-250);
  --button-disabled-text: var(--color-gray-700);
  --button-ghost-bg-hover: var(--color-gray-100);
  --button-ghost-bg-pressed: var(--color-gray-200);
  --button-ghost-border: var(--color-gray-500);
  --button-ghost-text: var(--color-gray-850);
  --button-link-bg-hover: var(--color-gray-100);
  --button-link-bg-pressed: var(--color-gray-200);
  --button-link-border: var(--color-base-black);
  --button-link-icon: var(--color-gray-850);
  --button-link-text: var(--color-gray-850);
  --button-primary-bg-hover: var(--color-gray-850);
  --button-primary-bg-pressed: var(--color-gray-800);
  --button-primary-bg: var(--color-base-black);
  --button-primary-text: var(--color-mint-500);
  --button-secondary-bg: var(--color-base-white);
  --button-secondary-border: var(--color-base-black);
  --button-secondary-text: var(--color-gray-850);
  --button-white-bg-hover: var(--color-gray-100);
  --button-white-bg-pressed: var(--color-gray-200);
  --button-white-bg: var(--color-base-white);
  --button-white-border: var(--color-base-black);
  --button-white-text: var(--color-gray-850);
  --card-bg-hover: var(--color-gray-050);
  --card-bg-inverse: var(--color-gray-850);
  --card-bg-subtle: var(--color-gray-100);
  --card-bg: var(--color-base-white);
  --card-border-hover: var(--color-gray-300);
  --card-border: var(--color-gray-200);
  --card-divider: var(--color-gray-250);
  --card-on-dark-icon: var(--color-base-white);
  --card-on-dark-text-primary: var(--color-base-white);
  --card-on-dark-text-secondary: var(--color-gray-400);
  --card-on-white-icon: var(--color-gray-850);
  --card-on-white-text-primary: var(--color-gray-850);
  --card-on-white-text-secondary: var(--color-gray-600);
  --form-border-default: var(--color-gray-500);
  --form-border-disabled: var(--color-gray-250);
  --form-border-error: var(--color-red-500);
  --form-border-focus: var(--color-mint-900);
  --form-border-hover: var(--color-gray-600);
  --form-error-text: var(--color-red-500);
  --form-field-bg-disabled: var(--color-gray-100);
  --form-field-bg: var(--color-base-white);
  --form-helper: var(--color-gray-600);
  --form-label: var(--color-gray-850);
  --form-placeholder: var(--color-gray-600);
  --form-text-disabled: var(--color-gray-700);
  --form-text: var(--color-gray-850);
  --icon-accent: var(--color-mint-500);
  --icon-on-inverse: var(--color-base-white);
  --icon-primary: var(--color-gray-850);
  --pagination-active-bg: var(--color-base-black);
  --pagination-active-text: var(--color-base-white);
  --pagination-icon-disabled: var(--color-gray-400);
  --pagination-icon: var(--color-gray-850);
  --pagination-item-bg-hover: var(--color-gray-100);
  --pagination-item-border: var(--color-gray-500);
  --pagination-item-text: var(--color-gray-850);
  --status-negative-bg: var(--color-red-100);
  --status-negative-border: var(--color-red-500);
  --status-negative-on-inverse: var(--color-red-300);
  --status-negative-on-tint: var(--color-red-700);
  --status-negative: var(--color-red-500);
  --status-positive-bg: var(--color-green-100);
  --status-positive-border: var(--color-green-500);
  --status-positive-on-inverse: var(--color-green-300);
  --status-positive-on-tint: var(--color-green-700);
  --status-positive: var(--color-green-500);
  --switch-appearance-border: var(--color-gray-200);
  --switch-appearance-dark-bg: var(--color-base-black);
  --switch-appearance-dark-icon: var(--color-base-white);
  --switch-appearance-light-bg: var(--color-base-white);
  --switch-appearance-light-icon: var(--color-base-black);
  --switch-currency-label-active: var(--color-mint-500);
  --switch-currency-label-inactive: var(--color-gray-850);
  --switch-currency-pill-active: var(--color-base-black);
  --switch-currency-track: var(--color-gray-050);
  --tab-indicator: var(--color-base-black);
  --tab-label-active: var(--color-gray-850);
  --tab-label-inactive: var(--color-gray-600);
  --table-body-bg: var(--color-base-white);
  --table-border: var(--color-gray-200);
  --table-cell-primary: var(--color-gray-850);
  --table-cell-secondary: var(--color-gray-600);
  --table-header-bg: var(--color-gray-100);
  --table-header-text: var(--color-gray-700);
  --table-row-divider: var(--color-gray-200);
  --table-row-hover: var(--color-gray-050);
  --table-row-selected: var(--color-gray-100);
  --text-accent: var(--color-mint-500);
  --text-link: var(--color-mint-500);
  --text-on-inverse-muted: var(--color-gray-150);
  --text-on-inverse: var(--color-base-white);
  --text-primary: var(--color-gray-850);
  --text-secondary: var(--color-gray-600);
  --text-tertiary: var(--color-gray-700);
}

[data-theme="dark"] {
  --background-accent: var(--color-mint-400);
  --background-canvas: var(--color-base-black);
  --background-surface-raised: var(--color-gray-850);
  --background-surface: var(--color-gray-950);
  --border-default: var(--color-gray-850);
  --border-strong: var(--color-gray-800);
  --border-subtle: var(--color-gray-700);
  --button-accent-bg-hover: var(--color-mint-400);
  --button-accent-bg-pressed: var(--color-mint-600);
  --button-accent-bg: var(--color-mint-500);
  --button-accent-text: var(--color-gray-850);
  --button-chip-bg-hover: var(--color-gray-900);
  --button-chip-bg-pressed: var(--color-gray-850);
  --button-chip-border: var(--color-mint-400);
  --button-chip-text: var(--color-base-white);
  --button-disabled-bg: var(--color-gray-800);
  --button-disabled-border: var(--color-gray-800);
  --button-disabled-text: var(--color-gray-400);
  --button-ghost-bg-hover: var(--color-gray-900);
  --button-ghost-bg-pressed: var(--color-gray-850);
  --button-ghost-border: var(--color-gray-600);
  --button-ghost-text: var(--color-base-white);
  --button-link-bg-hover: var(--color-gray-900);
  --button-link-bg-pressed: var(--color-gray-850);
  --button-link-border: var(--color-base-white);
  --button-link-icon: var(--color-base-white);
  --button-link-text: var(--color-base-white);
  --button-primary-bg-hover: var(--color-mint-300);
  --button-primary-bg-pressed: var(--color-mint-600);
  --button-primary-bg: var(--color-mint-400);
  --button-primary-text: var(--color-gray-850);
  --button-secondary-border: var(--color-gray-600);
  --card-bg-hover: var(--color-gray-900);
  --card-bg-subtle: var(--color-gray-850);
  --card-bg: var(--color-gray-950);
  --card-border-hover: var(--color-gray-700);
  --card-border: var(--color-gray-850);
  --card-divider: var(--color-gray-700);
  --card-on-white-icon: var(--color-base-white);
  --card-on-white-text-primary: var(--color-base-white);
  --card-on-white-text-secondary: var(--color-gray-400);
  --form-border-default: var(--color-gray-600);
  --form-border-disabled: var(--color-gray-800);
  --form-border-error: var(--color-red-300);
  --form-border-focus: var(--color-mint-400);
  --form-border-hover: var(--color-gray-500);
  --form-error-text: var(--color-red-300);
  --form-field-bg-disabled: var(--color-gray-900);
  --form-field-bg: var(--color-gray-950);
  --form-helper: var(--color-gray-400);
  --form-label: var(--color-base-white);
  --form-placeholder: var(--color-gray-500);
  --form-text-disabled: var(--color-gray-400);
  --form-text: var(--color-base-white);
  --icon-accent: var(--color-mint-400);
  --icon-primary: var(--color-base-white);
  --pagination-active-bg: var(--color-mint-400);
  --pagination-active-text: var(--color-gray-850);
  --pagination-icon-disabled: var(--color-gray-700);
  --pagination-icon: var(--color-base-white);
  --pagination-item-bg-hover: var(--color-gray-900);
  --pagination-item-border: var(--color-gray-600);
  --pagination-item-text: var(--color-base-white);
  --status-negative-bg: var(--color-red-900);
  --status-negative-border: var(--color-red-300);
  --status-negative-on-tint: var(--color-red-300);
  --status-negative: var(--color-red-300);
  --status-positive-bg: var(--color-green-900);
  --status-positive-border: var(--color-green-300);
  --status-positive-on-tint: var(--color-green-300);
  --status-positive: var(--color-green-300);
  --switch-appearance-border: var(--color-gray-700);
  --switch-currency-label-active: var(--color-mint-400);
  --tab-indicator: var(--color-mint-400);
  --tab-label-active: var(--color-base-white);
  --tab-label-inactive: var(--color-gray-400);
  --table-body-bg: var(--color-gray-950);
  --table-border: var(--color-gray-850);
  --table-cell-primary: var(--color-base-white);
  --table-cell-secondary: var(--color-gray-400);
  --table-header-bg: var(--color-gray-850);
  --table-header-text: var(--color-gray-400);
  --table-row-divider: var(--color-gray-850);
  --table-row-hover: var(--color-gray-900);
  --table-row-selected: var(--color-gray-850);
  --text-accent: var(--color-mint-400);
  --text-link: var(--color-mint-400);
  --text-primary: var(--color-base-white);
  --text-secondary: var(--color-gray-400);
  --text-tertiary: var(--color-gray-500);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background-accent: var(--color-mint-400);
    --background-canvas: var(--color-base-black);
    --background-surface-raised: var(--color-gray-850);
    --background-surface: var(--color-gray-950);
    --border-default: var(--color-gray-850);
    --border-strong: var(--color-gray-800);
    --border-subtle: var(--color-gray-700);
    --button-accent-bg-hover: var(--color-mint-400);
    --button-accent-bg-pressed: var(--color-mint-600);
    --button-accent-bg: var(--color-mint-500);
    --button-accent-text: var(--color-gray-850);
    --button-chip-bg-hover: var(--color-gray-900);
    --button-chip-bg-pressed: var(--color-gray-850);
    --button-chip-border: var(--color-mint-400);
    --button-chip-text: var(--color-base-white);
    --button-disabled-bg: var(--color-gray-800);
    --button-disabled-border: var(--color-gray-800);
    --button-disabled-text: var(--color-gray-400);
    --button-ghost-bg-hover: var(--color-gray-900);
    --button-ghost-bg-pressed: var(--color-gray-850);
    --button-ghost-border: var(--color-gray-600);
    --button-ghost-text: var(--color-base-white);
    --button-link-bg-hover: var(--color-gray-900);
    --button-link-bg-pressed: var(--color-gray-850);
    --button-link-border: var(--color-base-white);
    --button-link-icon: var(--color-base-white);
    --button-link-text: var(--color-base-white);
    --button-primary-bg-hover: var(--color-mint-300);
    --button-primary-bg-pressed: var(--color-mint-600);
    --button-primary-bg: var(--color-mint-400);
    --button-primary-text: var(--color-gray-850);
    --button-secondary-border: var(--color-gray-600);
    --card-bg-hover: var(--color-gray-900);
    --card-bg-subtle: var(--color-gray-850);
    --card-bg: var(--color-gray-950);
    --card-border-hover: var(--color-gray-700);
    --card-border: var(--color-gray-850);
    --card-divider: var(--color-gray-700);
    --card-on-white-icon: var(--color-base-white);
    --card-on-white-text-primary: var(--color-base-white);
    --card-on-white-text-secondary: var(--color-gray-400);
    --form-border-default: var(--color-gray-600);
    --form-border-disabled: var(--color-gray-800);
    --form-border-error: var(--color-red-300);
    --form-border-focus: var(--color-mint-400);
    --form-border-hover: var(--color-gray-500);
    --form-error-text: var(--color-red-300);
    --form-field-bg-disabled: var(--color-gray-900);
    --form-field-bg: var(--color-gray-950);
    --form-helper: var(--color-gray-400);
    --form-label: var(--color-base-white);
    --form-placeholder: var(--color-gray-500);
    --form-text-disabled: var(--color-gray-400);
    --form-text: var(--color-base-white);
    --icon-accent: var(--color-mint-400);
    --icon-primary: var(--color-base-white);
    --pagination-active-bg: var(--color-mint-400);
    --pagination-active-text: var(--color-gray-850);
    --pagination-icon-disabled: var(--color-gray-700);
    --pagination-icon: var(--color-base-white);
    --pagination-item-bg-hover: var(--color-gray-900);
    --pagination-item-border: var(--color-gray-600);
    --pagination-item-text: var(--color-base-white);
    --status-negative-bg: var(--color-red-900);
    --status-negative-border: var(--color-red-300);
    --status-negative-on-tint: var(--color-red-300);
    --status-negative: var(--color-red-300);
    --status-positive-bg: var(--color-green-900);
    --status-positive-border: var(--color-green-300);
    --status-positive-on-tint: var(--color-green-300);
    --status-positive: var(--color-green-300);
    --switch-appearance-border: var(--color-gray-700);
    --switch-currency-label-active: var(--color-mint-400);
    --tab-indicator: var(--color-mint-400);
    --tab-label-active: var(--color-base-white);
    --tab-label-inactive: var(--color-gray-400);
    --table-body-bg: var(--color-gray-950);
    --table-border: var(--color-gray-850);
    --table-cell-primary: var(--color-base-white);
    --table-cell-secondary: var(--color-gray-400);
    --table-header-bg: var(--color-gray-850);
    --table-header-text: var(--color-gray-400);
    --table-row-divider: var(--color-gray-850);
    --table-row-hover: var(--color-gray-900);
    --table-row-selected: var(--color-gray-850);
    --text-accent: var(--color-mint-400);
    --text-link: var(--color-mint-400);
    --text-primary: var(--color-base-white);
    --text-secondary: var(--color-gray-400);
    --text-tertiary: var(--color-gray-500);
  }
}

/* ---- Typography ---- */
:root {
  --font-sans: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
  --text-display-d1-bold-size: 72px;
  --text-display-d1-bold-line: 105px;
  --text-display-d1-bold-weight: 700;
  --text-display-d1-semibold-size: 72px;
  --text-display-d1-semibold-line: 105px;
  --text-display-d1-semibold-weight: 600;
  --text-display-d2-bold-size: 60px;
  --text-display-d2-bold-line: 90px;
  --text-display-d2-bold-weight: 700;
  --text-display-d2-semibold-size: 60px;
  --text-display-d2-semibold-line: 76px;
  --text-display-d2-semibold-weight: 600;
  --text-display-d3-bold-size: 48px;
  --text-display-d3-bold-line: 60px;
  --text-display-d3-bold-weight: 700;
  --text-display-d3-semibold-size: 48px;
  --text-display-d3-semibold-line: 60px;
  --text-display-d3-semibold-weight: 600;
  --text-heading-h1-bold-size: 40px;
  --text-heading-h1-bold-line: 56px;
  --text-heading-h1-bold-weight: 700;
  --text-heading-h1-semibold-size: 40px;
  --text-heading-h1-semibold-line: 56px;
  --text-heading-h1-semibold-weight: 600;
  --text-heading-h2-bold-size: 32px;
  --text-heading-h2-bold-line: 44px;
  --text-heading-h2-bold-weight: 700;
  --text-heading-h2-semibold-size: 32px;
  --text-heading-h2-semibold-line: 44px;
  --text-heading-h2-semibold-weight: 600;
  --text-heading-h3-bold-size: 28px;
  --text-heading-h3-bold-line: 40px;
  --text-heading-h3-bold-weight: 700;
  --text-heading-h3-semibold-size: 28px;
  --text-heading-h3-semibold-line: 40px;
  --text-heading-h3-semibold-weight: 600;
  --text-heading-h4-bold-size: 24px;
  --text-heading-h4-bold-line: 34px;
  --text-heading-h4-bold-weight: 700;
  --text-heading-h4-semibold-size: 24px;
  --text-heading-h4-semibold-line: 34px;
  --text-heading-h4-semibold-weight: 600;
  --text-heading-h5-bold-size: 20px;
  --text-heading-h5-bold-line: 28px;
  --text-heading-h5-bold-weight: 700;
  --text-heading-h5-semibold-size: 20px;
  --text-heading-h5-semibold-line: 28px;
  --text-heading-h5-semibold-weight: 600;
  --text-heading-h6-bold-size: 18px;
  --text-heading-h6-bold-line: 26px;
  --text-heading-h6-bold-weight: 700;
  --text-heading-h6-semibold-size: 18px;
  --text-heading-h6-semibold-line: 26px;
  --text-heading-h6-semibold-weight: 600;
  --text-body-xl-regular-size: 20px;
  --text-body-xl-regular-line: 34px;
  --text-body-xl-regular-weight: 400;
  --text-body-xl-medium-size: 20px;
  --text-body-xl-medium-line: 34px;
  --text-body-xl-medium-weight: 500;
  --text-body-xl-semibold-size: 20px;
  --text-body-xl-semibold-line: 34px;
  --text-body-xl-semibold-weight: 600;
  --text-body-l-regular-size: 18px;
  --text-body-l-regular-line: 32px;
  --text-body-l-regular-weight: 400;
  --text-body-l-medium-size: 18px;
  --text-body-l-medium-line: 32px;
  --text-body-l-medium-weight: 500;
  --text-body-l-semibold-size: 18px;
  --text-body-l-semibold-line: 32px;
  --text-body-l-semibold-weight: 600;
  --text-body-m-regular-size: 16px;
  --text-body-m-regular-line: 28px;
  --text-body-m-regular-weight: 400;
  --text-body-m-medium-size: 16px;
  --text-body-m-medium-line: 28px;
  --text-body-m-medium-weight: 500;
  --text-body-m-semibold-size: 16px;
  --text-body-m-semibold-line: 28px;
  --text-body-m-semibold-weight: 600;
  --text-body-s-regular-size: 14px;
  --text-body-s-regular-line: 24px;
  --text-body-s-regular-weight: 400;
  --text-body-s-medium-size: 14px;
  --text-body-s-medium-line: 24px;
  --text-body-s-medium-weight: 500;
  --text-body-s-semibold-size: 14px;
  --text-body-s-semibold-line: 24px;
  --text-body-s-semibold-weight: 600;
  --text-caption-caption-regular-size: 12px;
  --text-caption-caption-regular-line: 20px;
  --text-caption-caption-regular-weight: 400;
  --text-caption-caption-medium-size: 12px;
  --text-caption-caption-medium-line: 20px;
  --text-caption-caption-medium-weight: 500;
  --text-caption-caption-semibold-size: 12px;
  --text-caption-caption-semibold-line: 20px;
  --text-caption-caption-semibold-weight: 600;
  --text-label-overline-size: 12px;
  --text-label-overline-line: 18px;
  --text-label-overline-weight: 600;
  --text-button-button-l-size: 18px;
  --text-button-button-l-line: 26px;
  --text-button-button-l-weight: 600;
  --text-button-button-m-size: 16px;
  --text-button-button-m-line: 24px;
  --text-button-button-m-weight: 600;
  --text-button-button-s-size: 14px;
  --text-button-button-s-line: 20px;
  --text-button-button-s-weight: 600;
  --text-link-link-m-size: 16px;
  --text-link-link-m-line: 28px;
  --text-link-link-m-weight: 500;
  --text-link-link-s-size: 14px;
  --text-link-link-s-line: 24px;
  --text-link-link-s-weight: 500;
  --text-mobile-display-d1-size: 40px;
  --text-mobile-display-d1-line: 50px;
  --text-mobile-display-d1-weight: 700;
  --text-mobile-display-d2-size: 36px;
  --text-mobile-display-d2-line: 44px;
  --text-mobile-display-d2-weight: 700;
  --text-mobile-display-d3-size: 32px;
  --text-mobile-display-d3-line: 40px;
  --text-mobile-display-d3-weight: 700;
  --text-mobile-h1-size: 28px;
  --text-mobile-h1-line: 38px;
  --text-mobile-h1-weight: 700;
  --text-mobile-h2-size: 24px;
  --text-mobile-h2-line: 34px;
  --text-mobile-h2-weight: 700;
}

/* ready-made type classes */
.text-display-d1-bold {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 105px;
  font-weight: 700;
}
.text-display-d1-semibold {
  font-family: var(--font-sans);
  font-size: 72px;
  line-height: 105px;
  font-weight: 600;
}
.text-display-d2-bold {
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 90px;
  font-weight: 700;
}
.text-display-d2-semibold {
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 76px;
  font-weight: 600;
}
.text-display-d3-bold {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 60px;
  font-weight: 700;
}
.text-display-d3-semibold {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 60px;
  font-weight: 600;
}
.text-heading-h1-bold {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 56px;
  font-weight: 700;
}
.text-heading-h1-semibold {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 56px;
  font-weight: 600;
}
.text-heading-h2-bold {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
}
.text-heading-h2-semibold {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 44px;
  font-weight: 600;
}
.text-heading-h3-bold {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
}
.text-heading-h3-semibold {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 40px;
  font-weight: 600;
}
.text-heading-h4-bold {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
}
.text-heading-h4-semibold {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
}
.text-heading-h5-bold {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
.text-heading-h5-semibold {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
.text-heading-h6-bold {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}
.text-heading-h6-semibold {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.text-body-xl-regular {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 34px;
  font-weight: 400;
}
.text-body-xl-medium {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 34px;
  font-weight: 500;
}
.text-body-xl-semibold {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 34px;
  font-weight: 600;
}
.text-body-l-regular {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
}
.text-body-l-medium {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 32px;
  font-weight: 500;
}
.text-body-l-semibold {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
}
.text-body-m-regular {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}
.text-body-m-medium {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
}
.text-body-m-semibold {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
}
.text-body-s-regular {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}
.text-body-s-medium {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
}
.text-body-s-semibold {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
}
.text-caption-caption-regular {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
}
.text-caption-caption-medium {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
}
.text-caption-caption-semibold {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
}
.text-label-overline {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.text-button-button-l {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}
.text-button-button-m {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.text-button-button-s {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.text-link-link-m {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  text-decoration: underline;
}
.text-link-link-s {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: underline;
}
.text-mobile-display-d1 {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
}
.text-mobile-display-d2 {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
}
.text-mobile-display-d3 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
}
.text-mobile-h1 {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 38px;
  font-weight: 700;
}
.text-mobile-h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 34px;
  font-weight: 700;
}