/* Imported from Figma local variable collections on 2026-06-16. */
@font-face {
  font-family: "Public Sans";
  src: url("../../assets/fonts/PublicSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-Vietnamese-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-Vietnamese-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
  font-family: "Public Sans";
  src: url("../../assets/fonts/PublicSans-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-Vietnamese-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
  font-family: "Public Sans";
  src: url("../../assets/fonts/PublicSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../../assets/fonts/PublicSans-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../../assets/fonts/PublicSans-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../../assets/fonts/PublicSans-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root,
.figma-token-scope {
  /* Text / Desktop */
  --text-family-primary: "Public Sans";
  --text-family-secondary: "Inter";
  --text-weights-thin: 100;
  --text-weights-extralight: 200;
  --text-weights-light: 300;
  --text-weights-regular: 400;
  --text-weights-medium: 500;
  --text-weights-semibold: 600;
  --text-weights-bold: 700;
  --text-weights-extrabold: 800;
  --text-weights-black: 900;

  /* Colors / Light */
  --colors-primary-50: #e6f4ff;
  --colors-primary-100: #bae0ff;
  --colors-primary-200: #91caff;
  --colors-primary-300: #69b1ff;
  --colors-primary-400: #4096ff;
  --colors-primary-500: #1677ff;
  --colors-primary-600: #0958d9;
  --colors-primary-700: #003eb3;
  --colors-primary-800: #002c8c;
  --colors-primary-900: #001d66;
  --colors-gray-0: #ffffff;
  --colors-gray-50: #f9fafb;
  --colors-gray-100: #f3f4f6;
  --colors-gray-200: #e5e7eb;
  --colors-gray-300: #d1d5db;
  --colors-gray-400: #9ca3af;
  --colors-gray-500: #6b7280;
  --colors-gray-600: #4b5563;
  --colors-gray-700: #374151;
  --colors-gray-800: #1f2937;
  --colors-gray-900: #111827;

  /* Themes / Lightmode */
  --themes-text-primary: var(--colors-gray-800);
  --themes-text-secondary: var(--colors-gray-600);
  --themes-text-tertiary: var(--colors-gray-400);
  --themes-text-inverse: var(--colors-gray-0);
  --themes-text-brand: var(--colors-primary-500);
  --themes-text-disable: var(--colors-gray-300);
  --themes-background-default: var(--colors-gray-0);
  --themes-background-subtle: var(--colors-gray-50);
  --themes-background-muted: var(--colors-gray-100);
  --themes-background-brand: var(--colors-primary-50);
  --themes-background-inverse: var(--colors-gray-900);
  --themes-background-inverse-subtle: var(--colors-gray-600);
  --themes-border-default: var(--colors-gray-200);
  --themes-border-strong: var(--colors-gray-300);
  --themes-border-subtle: var(--colors-gray-100);
  --themes-border-focus: var(--colors-primary-500);
  --themes-border-disable: var(--colors-gray-200);
  --themes-action-primary: var(--colors-primary-500);
  --themes-action-primary-hover: var(--colors-primary-600);
  --themes-action-primary-active: var(--colors-primary-700);
  --themes-action-primary-disabled: var(--colors-primary-200);
  --themes-action-secondary: rgba(255, 255, 255, 0);
  --themes-action-secondary-hover: var(--colors-gray-100);
  --themes-action-ghost-hover: var(--colors-primary-50);
  --themes-card-background: #ffffff;
  --themes-card-border: var(--themes-border-default);
  --themes-card-title: var(--themes-text-primary);
  --themes-card-body: var(--themes-text-tertiary);
  --themes-card-icon: var(--themes-text-brand);
  --themes-icon-default: var(--colors-gray-700);
  --themes-icon-secondary: var(--colors-gray-500);
  --themes-icon-brand: var(--colors-primary-500);
  --themes-icon-disabled: var(--colors-gray-300);

  /* Spacing / Mode 1 */
  --spacing-space-04: 4px;
  --spacing-space-08: 8px;
  --spacing-space-16: 16px;
  --spacing-space-24: 24px;
  --spacing-space-32: 32px;
  --spacing-space-48: 48px;
  --spacing-space-80: 80px;
  --spacing-space-96: 96px;

  /* Responsive / Desktop */
  --responsive-element-device-device: "Desktop";
  --responsive-element-device-enable: 0;
  --responsive-element-device-disable: 1;
  --responsive-breakpoimt-full: 1440px;
  --responsive-heroframe-fullframe: 936px;
  --responsive-heroframe-left: 469px;
  --responsive-heroframe-right: 586px;
  --responsive-heroframe-mobile: 365px;
  --responsive-heroframe-laptop: 310px;
  --responsive-heroframe-meeting: 140px;
  --responsive-heroframe-sendfile: 80px;
  --responsive-heroframe-chatbox: 49px;
  --responsive-heroframe-full-frame: 1344px;
  --responsive-space-layout-hero: 96px;
  --responsive-space-layout-section-sm: 48px;
  --responsive-space-layout-section: 64px;
  --responsive-space-layout-section-lg: 80px;
  --responsive-space-icon-text: 8px;
  --responsive-space-component-padding-xsm: 12px;
  --responsive-space-button-gap-medium: 8px;
  --responsive-space-button-gap-large: 12px;
  --responsive-text-body-large-fontsize: 20px;
  --responsive-text-caption-fontsize: 12px;
  --responsive-space-component-padding-sm: 16px;
  --responsive-space-space-compact: 8px;
  --responsive-text-caption-lineheight: 16px;
  --responsive-text-caption-letterspacing: 0.3px;
  --responsive-text-caption-fontfamily: var(--text-family-secondary);
  --responsive-text-body-large-lineheight: 28px;
  --responsive-text-body-large-letterspacing: 0;
  --responsive-text-body-large-fontfamily: var(--text-family-secondary);
  --responsive-space-space-default: 16px;
  --responsive-space-space-title-gap: 24px;
  --responsive-space-space-block-gap: 32px;
  --responsive-space-space-section-gap: 48px;
  --responsive-space-component-padding-md: 24px;
  --responsive-space-component-padding-lg: 32px;
  --responsive-space-component-padding-xlg: 48px;
  --responsive-space-component-v-padding-xlg: 48px;
  --responsive-space-component-v-padding-button: 12px;
  --responsive-space-component-gap-sm: 8px;
  --responsive-space-component-gap-md: 16px;
  --responsive-space-component-gap-lg: 24px;
  --responsive-space-component-right-padding-button: 20px;
  --responsive-space-component-left-padding-button: 24px;
  --responsive-text-heading-h1-fontsize: 56px;
  --responsive-text-heading-h1-lineheight: 64px;
  --responsive-text-heading-h1-letterspacing: -1.5px;
  --responsive-text-heading-h1-fontfamily: var(--text-family-primary);
  --responsive-text-heading-h2-fontsize: 40px;
  --responsive-text-heading-h2-lineheight: 56px;
  --responsive-text-heading-h2-letterspacing: -0.4px;
  --responsive-text-heading-h2-fontfamily: var(--text-family-primary);
  --responsive-text-heading-h3-fontsize: 32px;
  --responsive-text-heading-h3-lineheight: 40px;
  --responsive-text-superhead: 192px;
  --responsive-text-heading-h3-letterspacing: -0.3px;
  --responsive-text-heading-h3-fontfamily: var(--text-family-primary);
  --responsive-text-heading-h4-fontsize: 20px;
  --responsive-text-heading-h4-lineheight: 28px;
  --responsive-text-heading-h4-letterspacing: -0.2px;
  --responsive-text-heading-h4-fontfamily: var(--text-family-primary);
  --responsive-text-body-default-fontsize: 16px;
  --responsive-text-body-default-lineheight: 24px;
  --responsive-text-body-default-letterspacing: 0;
  --responsive-text-body-default-fontfamily: var(--text-family-secondary);
  --responsive-text-body-small-fontsize: 14px;
  --responsive-text-body-small-lineheight: 20px;
  --responsive-text-body-small-letterspacing: 0;
  --responsive-text-body-small-fontfamily: var(--text-family-secondary);
  --responsive-special-figureheight: 125px;
  --responsive-special-figurewidth: 225px;
  --responsive-special-icon: 150px;
  --responsive-special-icon-2: 132px;
  --responsive-special-small-icon: 32px;

  /* Component aliases currently used by the HTML/CSS component stories. */
  --bg-primary-50: var(--colors-primary-50);
  --bg-primary-100: var(--colors-primary-100);
  --bg-primary-200: var(--colors-primary-200);
  --bg-primary-300: var(--colors-primary-300);
  --bg-primary-400: var(--colors-primary-400);
  --bg-primary-500: var(--themes-action-primary);
  --bg-primary-600: var(--themes-action-primary-hover);
  --bg-primary-700: var(--themes-action-primary-active);
  --bg-primary-800: var(--colors-primary-800);
  --bg-gray-50: var(--colors-gray-50);
  --bg-gray-100: var(--colors-gray-100);
  --bg-gray-200: var(--colors-gray-200);
  --bg-gray-300: var(--colors-gray-300);
  --bg-gray-400: var(--colors-gray-400);
  --bg-gray-500: var(--colors-gray-500);
  --bg-gray-600: var(--colors-gray-600);
  --bg-gray-700: var(--colors-gray-700);
  --bg-gray-800: var(--colors-gray-800);
  --bg-text-primary: var(--themes-text-primary);
  --bg-text-secondary: var(--themes-text-secondary);
  --bg-text-tertiary: var(--themes-text-tertiary);
  --bg-text-inverse: var(--themes-text-inverse);
  --bg-icon-default: var(--colors-gray-0);
  --bg-icon-brand: var(--themes-icon-brand);
  --bg-icon-disabled: var(--themes-icon-disabled);
  --bg-border-subtle: var(--themes-border-subtle);
  --bg-border-focus: var(--themes-border-focus);
  --bg-surface: var(--themes-background-default);
  --bg-font-body: var(--text-family-secondary), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg-font-heading: var(--text-family-primary), Inter, system-ui, sans-serif;
}

[data-token-colors="dark"],
[data-token-mode="dark"],
[data-theme="dark"] {
  --colors-primary-50: #e6f4ff;
  --colors-primary-100: #bae0ff;
  --colors-primary-200: #91caff;
  --colors-primary-300: #69b1ff;
  --colors-primary-400: #4096ff;
  --colors-primary-500: #1677ff;
  --colors-primary-600: #0958d9;
  --colors-primary-700: #003eb3;
  --colors-primary-800: #002c8c;
  --colors-primary-900: #001d66;
  --colors-gray-0: #ffffff;
  --colors-gray-50: #f9fafb;
  --colors-gray-100: #f3f4f6;
  --colors-gray-200: #e5e7eb;
  --colors-gray-300: #d1d5db;
  --colors-gray-400: #9ca3af;
  --colors-gray-500: #6b7280;
  --colors-gray-600: #4b5563;
  --colors-gray-700: #374151;
  --colors-gray-800: #1f2937;
  --colors-gray-900: #111827;
}

[data-token-themes="darkmode"],
[data-theme="dark"] {
  --themes-text-primary: var(--colors-gray-800);
  --themes-text-secondary: var(--colors-gray-600);
  --themes-text-tertiary: var(--colors-gray-400);
  --themes-text-inverse: var(--colors-gray-0);
  --themes-text-brand: var(--colors-primary-500);
  --themes-text-disable: var(--colors-gray-300);
  --themes-background-default: var(--colors-gray-0);
  --themes-background-subtle: var(--colors-gray-50);
  --themes-background-muted: var(--colors-gray-100);
  --themes-background-brand: var(--colors-primary-50);
  --themes-background-inverse: var(--colors-gray-900);
  --themes-background-inverse-subtle: var(--colors-gray-600);
  --themes-border-default: var(--colors-gray-200);
  --themes-border-strong: var(--colors-gray-300);
  --themes-border-subtle: var(--colors-gray-100);
  --themes-border-focus: var(--colors-primary-500);
  --themes-border-disable: var(--colors-gray-200);
  --themes-action-primary: var(--colors-primary-500);
  --themes-action-primary-hover: var(--colors-primary-600);
  --themes-action-primary-active: var(--colors-primary-700);
  --themes-action-primary-disabled: var(--colors-primary-200);
  --themes-action-secondary: rgba(255, 255, 255, 0);
  --themes-action-secondary-hover: var(--colors-gray-100);
  --themes-action-ghost-hover: var(--colors-primary-50);
  --themes-card-background: #ffffff;
  --themes-card-border: var(--themes-border-default);
  --themes-card-title: var(--themes-text-primary);
  --themes-card-body: var(--themes-text-tertiary);
  --themes-card-icon: var(--themes-text-brand);
  --themes-icon-default: var(--colors-gray-700);
  --themes-icon-secondary: var(--colors-gray-500);
  --themes-icon-brand: var(--colors-primary-500);
  --themes-icon-disabled: var(--colors-gray-300);
}

[data-token-text="tablet"] {
  --text-family-primary: "Public Sans";
  --text-family-secondary: "Inter";
}

[data-token-text="mobile"] {
  --text-family-primary: "Public Sans";
  --text-family-secondary: "Inter";
}

[data-token-responsive="tablet"] {
  --responsive-element-device-device: "Mobile";
  --responsive-element-device-enable: 0;
  --responsive-element-device-disable: 1;
  --responsive-breakpoimt-full: 744px;
  --responsive-heroframe-fullframe: 0px;
  --responsive-heroframe-left: 0px;
  --responsive-heroframe-right: 0px;
  --responsive-heroframe-mobile: 0px;
  --responsive-heroframe-laptop: 0px;
  --responsive-heroframe-meeting: 0px;
  --responsive-heroframe-sendfile: 0px;
  --responsive-heroframe-chatbox: 0px;
  --responsive-heroframe-full-frame: 680px;
  --responsive-space-layout-hero: 80px;
  --responsive-space-layout-section-sm: 36px;
  --responsive-space-layout-section: 56px;
  --responsive-space-layout-section-lg: 64px;
  --responsive-space-icon-text: 8px;
  --responsive-space-component-padding-xsm: 8px;
  --responsive-space-button-gap-medium: 8px;
  --responsive-space-button-gap-large: 12px;
  --responsive-text-body-large-fontsize: 20px;
  --responsive-text-caption-fontsize: 12px;
  --responsive-space-component-padding-sm: 8px;
  --responsive-space-space-compact: 6px;
  --responsive-text-caption-lineheight: 16px;
  --responsive-text-caption-letterspacing: 0.3px;
  --responsive-text-caption-fontfamily: var(--text-family-secondary);
  --responsive-text-body-large-lineheight: 28px;
  --responsive-text-body-large-letterspacing: 0;
  --responsive-text-body-large-fontfamily: var(--text-family-secondary);
  --responsive-space-space-default: 12px;
  --responsive-space-space-title-gap: 16px;
  --responsive-space-space-block-gap: 24px;
  --responsive-space-space-section-gap: 32px;
  --responsive-space-component-padding-md: 16px;
  --responsive-space-component-padding-lg: 24px;
  --responsive-space-component-padding-xlg: 32px;
  --responsive-space-component-v-padding-xlg: 32px;
  --responsive-space-component-v-padding-button: 12px;
  --responsive-space-component-gap-sm: 6px;
  --responsive-space-component-gap-md: 12px;
  --responsive-space-component-gap-lg: 16px;
  --responsive-space-component-right-padding-button: 16px;
  --responsive-space-component-left-padding-button: 20px;
  --responsive-text-heading-h1-fontsize: 40px;
  --responsive-text-heading-h1-lineheight: 48px;
  --responsive-text-heading-h1-letterspacing: -1px;
  --responsive-text-heading-h1-fontfamily: var(--text-family-primary);
  --responsive-text-heading-h2-fontsize: 28px;
  --responsive-text-heading-h2-lineheight: 40px;
  --responsive-text-heading-h2-letterspacing: -0.4px;
  --responsive-text-heading-h2-fontfamily: var(--text-family-primary);
  --responsive-text-heading-h3-fontsize: 20px;
  --responsive-text-heading-h3-lineheight: 28px;
  --responsive-text-superhead: 128px;
  --responsive-text-heading-h3-letterspacing: -0.3px;
  --responsive-text-heading-h3-fontfamily: var(--text-family-primary);
  --responsive-text-heading-h4-fontsize: 20px;
  --responsive-text-heading-h4-lineheight: 24px;
  --responsive-text-heading-h4-letterspacing: -0.2px;
  --responsive-text-heading-h4-fontfamily: var(--text-family-primary);
  --responsive-text-body-default-fontsize: 16px;
  --responsive-text-body-default-lineheight: 24px;
  --responsive-text-body-default-letterspacing: 0;
  --responsive-text-body-default-fontfamily: var(--text-family-secondary);
  --responsive-text-body-small-fontsize: 14px;
  --responsive-text-body-small-lineheight: 20px;
  --responsive-text-body-small-letterspacing: 0;
  --responsive-text-body-small-fontfamily: var(--text-family-secondary);
  --responsive-special-figureheight: 75px;
  --responsive-special-figurewidth: 135px;
  --responsive-special-icon: 128px;
  --responsive-special-icon-2: 108px;
  --responsive-special-small-icon: 28px;
}

[data-token-responsive="mobile"] {
  --responsive-element-device-device: "Mobile";
  --responsive-element-device-enable: 1;
  --responsive-element-device-disable: 0;
  --responsive-breakpoimt-full: 393px;
  --responsive-heroframe-fullframe: 393px;
  --responsive-heroframe-left: 361px;
  --responsive-heroframe-right: 361px;
  --responsive-heroframe-mobile: 202px;
  --responsive-heroframe-laptop: 170px;
  --responsive-heroframe-meeting: 70px;
  --responsive-heroframe-sendfile: 44px;
  --responsive-heroframe-chatbox: 31px;
  --responsive-heroframe-full-frame: 361px;
  --responsive-space-layout-hero: 64px;
  --responsive-space-layout-section-sm: 24px;
  --responsive-space-layout-section: 48px;
  --responsive-space-layout-section-lg: 56px;
  --responsive-space-icon-text: 8px;
  --responsive-space-component-padding-xsm: 4px;
  --responsive-space-button-gap-medium: 6px;
  --responsive-space-button-gap-large: 8px;
  --responsive-text-body-large-fontsize: 16px;
  --responsive-text-caption-fontsize: 11px;
  --responsive-space-component-padding-sm: 8px;
  --responsive-space-space-compact: 4px;
  --responsive-text-caption-lineheight: 16px;
  --responsive-text-caption-letterspacing: 0.3px;
  --responsive-text-caption-fontfamily: var(--text-family-secondary);
  --responsive-text-body-large-lineheight: 24px;
  --responsive-text-body-large-letterspacing: 0;
  --responsive-text-body-large-fontfamily: var(--text-family-secondary);
  --responsive-space-space-default: 8px;
  --responsive-space-space-title-gap: 16px;
  --responsive-space-space-block-gap: 24px;
  --responsive-space-space-section-gap: 24px;
  --responsive-space-component-padding-md: 16px;
  --responsive-space-component-padding-lg: 16px;
  --responsive-space-component-padding-xlg: 16px;
  --responsive-space-component-v-padding-xlg: 24px;
  --responsive-space-component-v-padding-button: 8px;
  --responsive-space-component-gap-sm: 4px;
  --responsive-space-component-gap-md: 8px;
  --responsive-space-component-gap-lg: 16px;
  --responsive-space-component-right-padding-button: 12px;
  --responsive-space-component-left-padding-button: 16px;
  --responsive-text-heading-h1-fontsize: 24px;
  --responsive-text-heading-h1-lineheight: 28px;
  --responsive-text-heading-h1-letterspacing: -1px;
  --responsive-text-heading-h1-fontfamily: var(--text-family-primary);
  --responsive-text-heading-h2-fontsize: 20px;
  --responsive-text-heading-h2-lineheight: 32px;
  --responsive-text-heading-h2-letterspacing: -0.4px;
  --responsive-text-heading-h2-fontfamily: var(--text-family-primary);
  --responsive-text-heading-h3-fontsize: 16px;
  --responsive-text-heading-h3-lineheight: 24px;
  --responsive-text-superhead: 96px;
  --responsive-text-heading-h3-letterspacing: -0.3px;
  --responsive-text-heading-h3-fontfamily: var(--text-family-primary);
  --responsive-text-heading-h4-fontsize: 16px;
  --responsive-text-heading-h4-lineheight: 24px;
  --responsive-text-heading-h4-letterspacing: -0.2px;
  --responsive-text-heading-h4-fontfamily: var(--text-family-primary);
  --responsive-text-body-default-fontsize: 14px;
  --responsive-text-body-default-lineheight: 20px;
  --responsive-text-body-default-letterspacing: 0;
  --responsive-text-body-default-fontfamily: var(--text-family-secondary);
  --responsive-text-body-small-fontsize: 13px;
  --responsive-text-body-small-lineheight: 20px;
  --responsive-text-body-small-letterspacing: 0;
  --responsive-text-body-small-fontfamily: var(--text-family-secondary);
  --responsive-special-figureheight: 45px;
  --responsive-special-figurewidth: 81px;
  --responsive-special-icon: 96px;
  --responsive-special-icon-2: 80px;
  --responsive-special-small-icon: 24px;
}

.token-page {
  min-height: 100vh;
  padding: 32px;
  color: var(--themes-text-primary);
  background: #f5f7fb;
  font-family: var(--bg-font-body);
}

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

.token-page header {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}

.token-page h1,
.token-page h2 {
  margin: 0;
  color: var(--themes-text-primary);
  font-family: var(--bg-font-heading);
  letter-spacing: 0;
}

.token-page h1 {
  font-size: 28px;
  line-height: 36px;
}

.token-page p {
  max-width: 840px;
  margin: 0;
  color: var(--themes-text-secondary);
  font-size: 15px;
  line-height: 24px;
}

.token-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.token-summary article {
  min-height: 92px;
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--themes-border-default);
  border-radius: 8px;
  background: var(--themes-card-background);
}

.token-summary strong {
  font-size: 22px;
  line-height: 28px;
}

.token-summary span {
  color: var(--themes-text-secondary);
  font-size: 13px;
}

.token-section {
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid var(--themes-border-default);
  border-radius: 8px;
  background: var(--themes-card-background);
}

.token-section h2 {
  padding: 16px 18px;
  border-bottom: 1px solid var(--themes-border-default);
  font-size: 16px;
  line-height: 24px;
}

.token-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.token-table th,
.token-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--themes-border-subtle);
  color: var(--themes-text-secondary);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
}

.token-table th {
  color: var(--themes-text-primary);
  background: var(--themes-background-subtle);
  font-weight: 700;
}

.token-table tr:last-child td {
  border-bottom: 0;
}

.token-swatch {
  width: 28px;
  height: 28px;
  display: inline-block;
  border: 1px solid var(--themes-border-default);
  border-radius: 6px;
  vertical-align: middle;
}

.token-code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

@media (max-width: 760px) {
  .token-page {
    padding: 20px;
  }

  .token-table {
    min-width: 720px;
  }

  .token-section {
    overflow-x: auto;
  }
}