/* @generated token-portal v0.1.0 profile=css-dropin manifest=tokens.manifest.json */
/* Source: Design System (Dev) */
/* Do not edit by hand — your changes will be overwritten on the next export. */

@layer tokens {
  :root {
    /* Color · primitive */
    --color-blue-100: #f6faff;
    --color-blue-125: #e8f1fd;
    --color-blue-150: #b8d4f8;
    --color-blue-200: #96bff4;
    --color-blue-300: #66a1f0;
    --color-blue-400: #488fed;
    --color-blue-500: #e11ae8;
    --color-blue-600: #1869d3;
    --color-blue-700: #1252a5;
    --color-blue-800: #0e3f80;
    --color-blue-900: #0b3061;
    --color-brand-100: #ebeff5;
    --color-brand-125: #e6eaf1;
    --color-brand-150: #b0bfd3;
    --color-brand-200: #8a9fbd;
    --color-brand-300: #54749f;
    --color-brand-400: #33598d;
    --color-brand-500: #002e6f;
    --color-brand-600: #002b66;
    --color-brand-700: #002150;
    --color-brand-800: #001a3e;
    --color-brand-900: #00142f;
    --color-crimson-100: #fffbfb;
    --color-crimson-125: #fff8f9;
    --color-crimson-150: #fee9ea;
    --color-crimson-200: #fdc7ca;
    --color-crimson-300: #fca6aa;
    --color-crimson-400: #fa8086;
    --color-crimson-500: #f94b53;
    --color-crimson-600: #d3323a;
    --color-crimson-700: #b32b31;
    --color-crimson-800: #902228;
    --color-crimson-900: #6b1a1d;
    --color-foundations-black: #111111;
    --color-foundations-transparent-black-100: #00000000;
    --color-foundations-transparent-black-150: #00000026;
    --color-foundations-transparent-black-200: #00000033;
    --color-foundations-transparent-black-300: #0000004d;
    --color-foundations-transparent-black-400: #00000066;
    --color-foundations-transparent-black-500: #00000080;
    --color-foundations-transparent-black-600: #00000099;
    --color-foundations-transparent-black-700: #000000b3;
    --color-foundations-transparent-black-800: #000000cc;
    --color-foundations-transparent-black-900: #000000e6;
    --color-foundations-transparent-white-100: #ffffff00;
    --color-foundations-transparent-white-150: #ffffff26;
    --color-foundations-transparent-white-200: #ffffff33;
    --color-foundations-transparent-white-300: #ffffff4d;
    --color-foundations-transparent-white-400: #ffffff66;
    --color-foundations-transparent-white-500: #ffffff80;
    --color-foundations-transparent-white-600: #ffffff99;
    --color-foundations-transparent-white-700: #ffffffb3;
    --color-foundations-transparent-white-800: #ffffffcc;
    --color-foundations-transparent-white-900: #ffffffe6;
    --color-foundations-white: #ffffff;
    --color-green-100: #f7fdfc;
    --color-green-125: #f3fcfa;
    --color-green-150: #d8f4ed;
    --color-green-200: #9de2d1;
    --color-green-300: #5ed0b4;
    --color-green-400: #16ba92;
    --color-green-500: #009e77;
    --color-green-600: #008161;
    --color-green-700: #006d52;
    --color-green-800: #005742;
    --color-green-900: #004131;
    --color-orange-100: #fffbf6;
    --color-orange-125: #fff9f2;
    --color-orange-150: #feebd2;
    --color-orange-200: #fdcc8e;
    --color-orange-300: #fcac47;
    --color-orange-400: #f68900;
    --color-orange-500: #cf7400;
    --color-orange-600: #a95e00;
    --color-orange-700: #8f5000;
    --color-orange-800: #734000;
    --color-orange-900: #552f00;
    --color-red-100: #fdeeee;
    --color-red-125: #fbe6e6;
    --color-red-150: #f3b0b0;
    --color-red-200: #ed8a8a;
    --color-red-300: #e55454;
    --color-red-400: #e03333;
    --color-red-500: #d80000;
    --color-red-600: #c50000;
    --color-red-700: #990000;
    --color-red-800: #770000;
    --color-red-900: #5b0000;
    --color-slate-100: #f5f6f6;
    --color-slate-125: #f0f1f2;
    --color-slate-150: #d1d3d8;
    --color-slate-200: #bbbec5;
    --color-slate-300: #9ca1aa;
    --color-slate-400: #898e99;
    --color-slate-500: #6b7280;
    --color-slate-600: #616874;
    --color-slate-700: #4c515b;
    --color-slate-800: #3b3f46;
    --color-slate-900: #2d3036;
    --color-yellow-100: #fffcf1;
    --color-yellow-125: #fffaeb;
    --color-yellow-150: #fdf1c6;
    --color-yellow-200: #fceaaa;
    --color-yellow-300: #fae084;
    --color-yellow-400: #f9da6c;
    --color-yellow-500: #f8d147;
    --color-yellow-600: #e2be41;
    --color-yellow-700: #b09432;
    --color-yellow-800: #887327;
    --color-yellow-900: #68581e;

    /* Size · primitive */
    --size-0: 0;
    --size-25: 1px;
    --size-50: 2px;
    --size-100: 4px;
    --size-150: 6px;
    --size-200: 8px;
    --size-300: 12px;
    --size-400: 16px;
    --size-500: 20px;
    --size-700: 24px;
    --size-800: 28px;
    --size-900: 32px;
    --size-950: 36px;
    --size-1000: 40px;
    --size-1100: 48px;
    --size-1200: 56px;
    --size-1300: 64px;
    --size-1400: 72px;
    --size-1425: 76px;
    --size-1450: 80px;
    --size-1475: 88px;
    --size-1500: 96px;
    --size-1600: 128px;
    --size-1700: 256px;
    --size-1800: 512px;

    /* Typography · primitive */
    --font-1-bold: 700;
    --font-1-extrabold: 800;
    --font-1-extralight: 200;
    --font-1-light: 300;
    --font-1-manrope: Manrope;
    --font-1-medium: 500;
    --font-1-regular: 400;
    --font-1-semibold: 600;
    --font-2-bold: 700;
    --font-2-light: 300;
    --font-2-manrope: Manrope;
    --font-2-regular: 400;
    --font-2-semibold: 600;

    /* Effect styles · semantic */
    --background-blur: blur(38.9px); /* backdrop-filter */
    --beautiful-shadow: 11px 21px 52px 0 #0000001a, 46px 82px 94px 0 #00000017, 103px 185px 127px 0 #0000000d, 182px 329px 150px 0 #00000003, 285px 514px 164px 0 #00000000;
    --layer-blur: blur(26.2px); /* filter */

    /* Gradients · semantic */
    --gradient-1: linear-gradient(128deg, #f1ce28 26%, #349456 75%);

    /* Semantic · semantic */
    --semantic-border-radius-50: var(--size-50);
    --semantic-border-radius-100: var(--size-100);
    --semantic-border-radius-150: var(--size-150);
    --semantic-border-radius-200: var(--size-200);
    --semantic-border-radius-400: var(--size-400);
    --semantic-border-radius-800: var(--size-800);
    --semantic-border-radius-none: var(--size-0);
    --semantic-border-radius-round: var(--size-1800);
    --semantic-border-width-25: var(--size-25);
    --semantic-border-width-50: var(--size-50);
    --semantic-border-width-100: var(--size-100);
    --semantic-border-width-150: var(--size-150);
    --semantic-border-width-none: var(--size-0);
    --semantic-brand-100: var(--color-brand-100);
    --semantic-brand-125: var(--color-brand-125);
    --semantic-brand-150: var(--color-brand-150);
    --semantic-brand-200: var(--color-brand-200);
    --semantic-brand-300: var(--color-brand-300);
    --semantic-brand-400: var(--color-brand-400);
    --semantic-brand-500: var(--color-brand-500);
    --semantic-brand-600: var(--color-brand-600);
    --semantic-brand-700: var(--color-brand-700);
    --semantic-brand-800: var(--color-brand-800);
    --semantic-brand-900: var(--color-brand-900);
    --semantic-discount-100: var(--color-red-100);
    --semantic-discount-125: var(--color-red-125);
    --semantic-discount-150: var(--color-red-150);
    --semantic-discount-200: var(--color-red-200);
    --semantic-discount-300: var(--color-red-300);
    --semantic-discount-400: var(--color-red-400);
    --semantic-discount-500: var(--color-red-500);
    --semantic-discount-600: var(--color-red-600);
    --semantic-discount-700: var(--color-red-700);
    --semantic-discount-800: var(--color-red-800);
    --semantic-discount-900: var(--color-red-900);
    --semantic-error-100: var(--color-red-100);
    --semantic-error-125: var(--color-red-125);
    --semantic-error-150: var(--color-red-150);
    --semantic-error-200: var(--color-red-200);
    --semantic-error-300: var(--color-red-300);
    --semantic-error-400: var(--color-red-400);
    --semantic-error-500: var(--color-red-500);
    --semantic-error-600: var(--color-red-600);
    --semantic-error-700: var(--color-red-700);
    --semantic-error-800: var(--color-red-800);
    --semantic-error-900: var(--color-red-900);
    --semantic-font-georgia: var(--font-2-manrope);
    --semantic-font-proxima-nova: var(--font-1-manrope);
    --semantic-foundation-black: var(--color-foundations-black);
    --semantic-foundation-white: var(--color-foundations-white);
    --semantic-information-100: var(--color-brand-100);
    --semantic-information-125: var(--color-brand-125);
    --semantic-information-150: var(--color-brand-150);
    --semantic-information-200: var(--color-brand-200);
    --semantic-information-300: var(--color-brand-300);
    --semantic-information-400: var(--color-brand-400);
    --semantic-information-500: var(--color-brand-500);
    --semantic-information-600: var(--color-brand-600);
    --semantic-information-700: var(--color-brand-700);
    --semantic-information-800: var(--color-brand-800);
    --semantic-information-900: var(--color-brand-900);
    --semantic-neutral-100: var(--color-slate-100);
    --semantic-neutral-125: var(--color-slate-125);
    --semantic-neutral-150: var(--color-slate-150);
    --semantic-neutral-200: var(--color-slate-200);
    --semantic-neutral-300: var(--color-slate-300);
    --semantic-neutral-400: var(--color-slate-400);
    --semantic-neutral-500: var(--color-slate-500);
    --semantic-neutral-600: var(--color-slate-600);
    --semantic-neutral-700: var(--color-slate-700);
    --semantic-neutral-800: var(--color-slate-800);
    --semantic-neutral-900: var(--color-slate-900);
    --semantic-success-100: var(--color-green-100);
    --semantic-success-125: var(--color-green-125);
    --semantic-success-150: var(--color-green-150);
    --semantic-success-200: var(--color-green-200);
    --semantic-success-300: var(--color-green-300);
    --semantic-success-400: var(--color-green-400);
    --semantic-success-500: var(--color-green-500);
    --semantic-success-600: var(--color-green-600);
    --semantic-success-700: var(--color-green-700);
    --semantic-success-800: var(--color-green-800);
    --semantic-success-900: var(--color-green-900);
    --semantic-warning-100: var(--color-orange-100);
    --semantic-warning-125: var(--color-orange-125);
    --semantic-warning-150: var(--color-orange-150);
    --semantic-warning-200: var(--color-orange-200);
    --semantic-warning-300: var(--color-orange-300);
    --semantic-warning-400: var(--color-orange-400);
    --semantic-warning-500: var(--color-orange-500);
    --semantic-warning-600: var(--color-orange-600);
    --semantic-warning-700: var(--color-orange-700);
    --semantic-warning-800: var(--color-orange-800);
    --semantic-warning-900: var(--color-orange-900);

    /* Typography Settings · semantic */
    --body-12-font-family: var(--font-1-manrope);
    --body-12-font-weight-1: var(--font-1-regular);
    --body-12-font-weight-2: var(--font-1-semibold);
    --body-12-letter-spacing: var(--size-0);
    --body-12-line-height: var(--size-400);
    --body-12-paragraph: 0;
    --body-12-size: var(--size-300);
    --body-13-font-family: var(--font-1-manrope);
    --body-13-font-weight-1: var(--font-1-regular);
    --body-13-font-weight-2: var(--font-1-semibold);
    --body-13-letter-spacing: var(--size-25);
    --body-13-line-height: var(--size-500);
    --body-13-paragraph: 0;
    --body-13-size: 13px;
    --body-14-font-family: var(--font-1-manrope);
    --body-14-font-weight-1: var(--font-1-regular);
    --body-14-font-weight-2: var(--font-1-semibold);
    --body-14-letter-spacing: 0;
    --body-14-line-height: var(--size-500);
    --body-14-paragraph: 0;
    --body-14-size: 14px;
    --body-16-font-family: var(--font-1-manrope);
    --body-16-font-weight-1: var(--font-1-regular);
    --body-16-font-weight-2: var(--font-1-semibold);
    --body-16-letter-spacing: var(--size-0);
    --body-16-line-height: var(--size-700);
    --body-16-paragraph: 0;
    --body-16-size: var(--size-400);
    --body-18-font-family: var(--font-1-manrope);
    --body-18-font-weight-1: var(--font-1-regular);
    --body-18-font-weight-2: var(--font-1-bold);
    --body-18-letter-spacing: 0;
    --body-18-line-height: var(--size-700);
    --body-18-paragraph: 0;
    --body-18-size: 18px;
    --display-l-font-family: var(--font-1-manrope);
    --display-l-font-weight: var(--font-1-extrabold);
    --display-l-letter-spacing: 0;
    --display-l-line-height: var(--size-1000);
    --display-l-paragraph: 0;
    --display-l-size: var(--size-900);
    --display-m-font-family: var(--font-1-manrope);
    --display-m-font-weight: var(--font-1-bold);
    --display-m-letter-spacing: var(--size-0);
    --display-m-line-height: var(--size-700);
    --display-m-paragraph: 0;
    --display-m-size: var(--size-500);
    --display-xl-font-family: var(--font-1-manrope);
    --display-xl-font-weight: var(--font-1-extrabold);
    --display-xl-letter-spacing: 0;
    --display-xl-line-height: 44px;
    --display-xl-paragraph: 0;
    --display-xl-size: var(--size-950);
    --display-xxl-font-family: var(--font-1-manrope);
    --display-xxl-font-weight: var(--font-1-extrabold);
    --display-xxl-letter-spacing: 0;
    --display-xxl-line-height: var(--size-1100);
    --display-xxl-paragraph: 0;
    --display-xxl-size: var(--size-1000);
    --display-xxxl-font-family: var(--font-1-manrope);
    --display-xxxl-font-weight: var(--font-1-extrabold);
    --display-xxxl-letter-spacing: 0;
    --display-xxxl-line-height: var(--size-1475);
    --display-xxxl-paragraph: 0;
    --display-xxxl-size: var(--size-1400);
    --headline-1-font-family: var(--font-2-manrope);
    --headline-1-font-weight: var(--font-2-bold);
    --headline-1-letter-spacing: 0;
    --headline-1-line-height: var(--size-950);
    --headline-1-paragraph: 0;
    --headline-1-size: var(--size-800);
    --headline-2-font-family: var(--font-2-manrope);
    --headline-2-font-weight: var(--font-2-bold);
    --headline-2-letter-spacing: 0;
    --headline-2-line-height: var(--size-900);
    --headline-2-paragraph: 0;
    --headline-2-size: var(--size-700);
    --headline-3-font-family: var(--font-2-manrope);
    --headline-3-font-weight: var(--font-2-bold);
    --headline-3-letter-spacing: 0;
    --headline-3-line-height: var(--size-800);
    --headline-3-paragraph: 0;
    --headline-3-size: var(--size-500);
    --headline-4-font-family: var(--font-2-manrope);
    --headline-4-font-weight: var(--font-2-bold);
    --headline-4-letter-spacing: 0;
    --headline-4-line-height: var(--size-700);
    --headline-4-paragraph: 0;
    --headline-4-size: 18px;
    --headline-5-6-font-family: var(--font-2-manrope);
    --headline-5-6-font-weight: var(--font-2-bold);
    --headline-5-6-letter-spacing: 0;
    --headline-5-6-line-height: var(--size-700);
    --headline-5-6-paragraph: 0;
    --headline-5-6-size: var(--size-400);
    --helper-text-12-font-family: var(--font-1-manrope);
    --helper-text-12-font-weight-1: var(--font-1-regular);
    --helper-text-12-font-weight-2: var(--font-1-semibold);
    --helper-text-12-letter-spacing: var(--size-0);
    --helper-text-12-line-height: var(--size-400);
    --helper-text-12-paragraph: 0;
    --helper-text-12-size: var(--size-300);
    --subtitle-14-font-family: var(--font-1-manrope);
    --subtitle-14-font-weight-1: var(--font-1-regular);
    --subtitle-14-font-weight-2: var(--font-1-bold);
    --subtitle-14-letter-spacing: var(--size-0);
    --subtitle-14-line-height: var(--size-500);
    --subtitle-14-paragraph: 0;
    --subtitle-14-size: 14px;
    --subtitle-18-font-family: var(--font-1-manrope);
    --subtitle-18-font-weight-1: var(--font-1-regular);
    --subtitle-18-font-weight-2: var(--font-1-bold);
    --subtitle-18-letter-spacing: var(--size-0);
    --subtitle-18-line-height: var(--size-500);
    --subtitle-18-paragraph: 0;
    --subtitle-18-size: 18px;

    /* Mapped · component */
    --border-brand-primary-active: var(--semantic-brand-200);
    --border-brand-primary-default: var(--semantic-brand-500);
    --border-brand-primary-default-hover: var(--semantic-brand-700);
    --border-brand-primary-default-subtle: var(--semantic-brand-125);
    --border-brand-primary-default-subtle-hover: var(--semantic-brand-150);
    --border-brand-primary-focus: var(--semantic-brand-400);
    --border-brand-primary-high-contrast: var(--semantic-brand-800);
    --border-brand-primary-on-color: var(--semantic-foundation-white);
    --border-brand-active: var(--semantic-brand-200);
    --border-brand-default: var(--semantic-brand-500);
    --border-brand-default-hover: var(--semantic-brand-700);
    --border-brand-default-subtle: var(--semantic-brand-125);
    --border-brand-default-subtle-hover: var(--semantic-brand-150);
    --border-brand-focus: var(--semantic-brand-400);
    --border-brand-high-contrast: var(--semantic-brand-800);
    --border-brand-on-color: var(--semantic-foundation-white);
    --border-default-card: var(--semantic-foundation-white);
    --border-default-card-secondary: var(--semantic-neutral-125);
    --border-default-default: var(--semantic-neutral-400);
    --border-default-high-contrast: var(--semantic-neutral-800);
    --border-default-low-contrast: var(--semantic-neutral-150);
    --border-default-on-color: var(--semantic-foundation-white);
    --border-default-page-secondary: var(--semantic-neutral-125);
    --border-disabled-disabled: var(--semantic-neutral-150);
    --border-disabled-focus: var(--semantic-neutral-125);
    --border-discount-active: var(--semantic-discount-200);
    --border-discount-default: var(--semantic-discount-600);
    --border-discount-default-hover: var(--semantic-discount-400);
    --border-discount-focus: var(--semantic-discount-400);
    --border-discount-high-contrast: var(--semantic-discount-900);
    --border-discount-on-color: var(--semantic-foundation-white);
    --border-discount-on-color-hover: var(--semantic-discount-125);
    --border-error-default: var(--semantic-error-150);
    --border-error-default-hover: var(--semantic-error-400);
    --border-error-default-subtle: var(--semantic-error-125);
    --border-error-default-subtle-hover: var(--semantic-error-150);
    --border-error-focus: var(--semantic-error-500);
    --border-error-high-contrast: var(--semantic-error-800);
    --border-information-default: var(--semantic-brand-150);
    --border-information-default-hover: var(--semantic-brand-400);
    --border-information-default-subtle: var(--semantic-brand-125);
    --border-information-default-subtle-hover: var(--semantic-brand-150);
    --border-information-high-contrast: var(--semantic-brand-800);
    --border-page-card: var(--semantic-foundation-white);
    --border-page-card-secondary: var(--semantic-neutral-125);
    --border-page-page: var(--semantic-neutral-400);
    --border-page-page-secondary: var(--semantic-neutral-125);
    --border-success-active: var(--semantic-success-200);
    --border-success-default: var(--semantic-success-200);
    --border-success-default-hover: var(--semantic-success-400);
    --border-success-default-subtle: var(--semantic-success-125);
    --border-success-default-subtle-hover: var(--semantic-success-150);
    --border-success-focus: var(--semantic-success-400);
    --border-success-high-contrast: var(--semantic-success-800);
    --border-success-on-color: var(--semantic-foundation-white);
    --border-warning-default: var(--semantic-warning-200);
    --border-warning-default-subtle: var(--semantic-warning-125);
    --border-warning-default-subtle-hover: var(--semantic-warning-150);
    --border-warning-high-contrast: var(--semantic-warning-800);
    --border-warning-hover: var(--semantic-warning-400);
    --icon-brand-primary-default: var(--icon-brand-default);
    --icon-brand-primary-default-hover: var(--icon-brand-default-hover);
    --icon-brand-primary-on-color: var(--semantic-foundation-white);
    --icon-brand-primary-on-color-hover: var(--semantic-foundation-white);
    --icon-brand-default: var(--semantic-brand-500);
    --icon-brand-default-hover: var(--semantic-brand-700);
    --icon-brand-on-color: var(--semantic-foundation-white);
    --icon-brand-on-color-hover: var(--semantic-foundation-white);
    --icon-default-default: var(--semantic-foundation-black);
    --icon-default-hint: var(--color-slate-500);
    --icon-default-on-color: var(--semantic-foundation-white);
    --icon-default-placeholder: var(--color-slate-700);
    --icon-disabled-default: var(--semantic-neutral-500);
    --icon-disabled-on-color: var(--semantic-neutral-200);
    --icon-discount-default: var(--semantic-discount-600);
    --icon-discount-default-hover: var(--semantic-discount-400);
    --icon-discount-high-contrast: var(--semantic-discount-900);
    --icon-discount-on-color: var(--semantic-foundation-white);
    --icon-discount-on-color-hover: var(--semantic-discount-125);
    --icon-error-default: var(--semantic-error-600);
    --icon-error-default-hover: var(--semantic-error-400);
    --icon-error-high-contrast: var(--semantic-error-900);
    --icon-error-on-color: var(--semantic-error-150);
    --icon-error-on-color-hover: var(--semantic-error-125);
    --icon-information-default: var(--color-brand-500);
    --icon-information-default-hover: var(--color-brand-400);
    --icon-information-high-contrast: var(--color-brand-800);
    --icon-information-on-color: var(--color-brand-150);
    --icon-information-on-color-hover: var(--color-brand-125);
    --icon-on-color-body: var(--semantic-foundation-white);
    --icon-on-color-caption: var(--semantic-foundation-white);
    --icon-on-color-heading: var(--semantic-foundation-white);
    --icon-on-color-placeholder: var(--color-slate-200);
    --icon-promotion-default: var(--color-yellow-500);
    --icon-promotion-default-hover: var(--color-yellow-400);
    --icon-promotion-default-subtle: var(--color-yellow-125);
    --icon-promotion-default-subtle-hover: var(--color-yellow-150);
    --icon-promotion-high-contrast: var(--color-yellow-900);
    --icon-success-default: var(--semantic-success-600);
    --icon-success-default-hover: var(--semantic-success-600);
    --icon-success-high-contrast: var(--semantic-success-800);
    --icon-success-on-color: var(--semantic-foundation-white);
    --icon-success-on-color-hover: var(--semantic-success-125);
    --icon-warning-default: var(--semantic-warning-600);
    --icon-warning-default-hover: var(--semantic-warning-400);
    --icon-warning-high-contrast: var(--semantic-warning-800);
    --icon-warning-on-color: var(--semantic-warning-150);
    --icon-warning-on-color-hover: var(--semantic-warning-125);
    --surface-brand-primary-active: var(--semantic-brand-200);
    --surface-brand-primary-default: var(--semantic-brand-500);
    --surface-brand-primary-default-hover: var(--semantic-brand-700);
    --surface-brand-primary-default-subtle: var(--semantic-brand-100);
    --surface-brand-primary-default-subtle-hover: var(--semantic-brand-125);
    --surface-brand-primary-high-contrast: var(--semantic-brand-800);
    --surface-brand-primary-on-color: var(--semantic-foundation-white);
    --surface-brand-primary-on-color-hover: var(--semantic-neutral-100);
    --surface-brand-primary-on-color-selected: var(--semantic-neutral-125);
    --surface-brand-active: var(--semantic-brand-200);
    --surface-brand-default: var(--semantic-brand-500);
    --surface-brand-default-hover: var(--semantic-brand-700);
    --surface-brand-default-subtle: var(--semantic-brand-100);
    --surface-brand-default-subtle-hover: var(--semantic-brand-125);
    --surface-brand-high-contrast: var(--semantic-brand-800);
    --surface-brand-on-color: var(--semantic-foundation-white);
    --surface-brand-on-color-hover: var(--semantic-neutral-100);
    --surface-brand-on-color-selected: var(--semantic-neutral-125);
    --surface-default-card: var(--semantic-foundation-white);
    --surface-default-card-secondary: var(--semantic-neutral-100);
    --surface-default-default: var(--semantic-neutral-100);
    --surface-default-high-contrast: var(--semantic-neutral-800);
    --surface-default-on-color: var(--semantic-foundation-white);
    --surface-default-page: var(--semantic-foundation-white);
    --surface-default-page-secondary: var(--semantic-neutral-125);
    --surface-disabled-disabled: var(--semantic-neutral-125);
    --surface-discount-active: var(--semantic-discount-200);
    --surface-discount-default: var(--semantic-discount-600);
    --surface-discount-default-hover: var(--semantic-discount-700);
    --surface-discount-high-contrast: var(--semantic-discount-800);
    --surface-discount-on-color: var(--semantic-discount-150);
    --surface-discount-on-color-hover: var(--semantic-discount-125);
    --surface-error-default: var(--semantic-error-500);
    --surface-error-default-hover: var(--semantic-error-400);
    --surface-error-default-subtle: var(--semantic-error-125);
    --surface-error-default-subtle-hover: var(--semantic-error-100);
    --surface-error-high-contrast: var(--semantic-error-800);
    --surface-information-default: var(--semantic-brand-500);
    --surface-information-default-hover: var(--semantic-brand-400);
    --surface-information-default-subtle: var(--semantic-brand-125);
    --surface-information-default-subtle-hover: var(--semantic-brand-100);
    --surface-information-high-contrast: var(--semantic-brand-800);
    --surface-on-color-body: var(--semantic-foundation-white);
    --surface-on-color-caption: var(--semantic-foundation-white);
    --surface-on-color-heading: var(--semantic-foundation-white);
    --surface-on-color-high-contrast: var(--semantic-neutral-800);
    --surface-on-color-placeholder: var(--color-slate-200);
    --surface-promotion-default: var(--color-yellow-500);
    --surface-promotion-default-hover: var(--color-yellow-400);
    --surface-promotion-default-subtle: var(--color-yellow-125);
    --surface-promotion-default-subtle-hover: var(--color-yellow-100);
    --surface-promotion-high-contrast: var(--color-yellow-800);
    --surface-success-active: var(--semantic-success-200);
    --surface-success-default: var(--semantic-success-600);
    --surface-success-default-hover: var(--semantic-success-700);
    --surface-success-default-subtle: var(--semantic-success-125);
    --surface-success-default-subtle-hover: var(--semantic-success-100);
    --surface-success-high-contrast: var(--semantic-success-800);
    --surface-warning-default: var(--semantic-warning-500);
    --surface-warning-default-hover: var(--semantic-warning-400);
    --surface-warning-default-subtle: var(--semantic-warning-125);
    --surface-warning-default-subtle-hover: var(--semantic-warning-100);
    --surface-warning-high-contrast: var(--semantic-warning-800);
    --text-brand-active: var(--semantic-foundation-white);
    --text-brand-default: var(--semantic-brand-500);
    --text-brand-default-hover: var(--semantic-brand-700);
    --text-brand-on-color: var(--semantic-foundation-white);
    --text-brand-on-color-hover: var(--semantic-foundation-white);
    --text-default-caption: var(--semantic-foundation-black);
    --text-default-default: var(--semantic-foundation-black);
    --text-default-default-hover: var(--color-slate-700);
    --text-default-display: var(--semantic-foundation-black);
    --text-default-heading: var(--semantic-foundation-black);
    --text-default-hint: var(--color-slate-500);
    --text-default-placeholder: var(--color-slate-700);
    --text-disabled-default: var(--semantic-neutral-600);
    --text-disabled-on-color: var(--semantic-neutral-200);
    --text-discount-default: var(--semantic-discount-600);
    --text-discount-default-hover: var(--semantic-discount-400);
    --text-discount-high-contrast: var(--semantic-discount-900);
    --text-discount-on-color: var(--semantic-foundation-white);
    --text-discount-on-color-hover: var(--semantic-discount-125);
    --text-error-default: var(--semantic-error-600);
    --text-error-default-hover: var(--semantic-error-400);
    --text-error-high-contrast: var(--semantic-error-900);
    --text-error-on-color: var(--semantic-error-150);
    --text-error-on-color-hover: var(--semantic-error-125);
    --text-information-default: var(--color-brand-600);
    --text-information-default-hover: var(--color-brand-400);
    --text-information-high-contrast: var(--color-brand-900);
    --text-information-on-color: var(--color-brand-150);
    --text-information-on-color-hover: var(--color-brand-125);
    --text-on-color-body: var(--semantic-foundation-white);
    --text-on-color-caption: var(--semantic-foundation-white);
    --text-on-color-heading: var(--semantic-foundation-white);
    --text-on-color-placeholder: var(--color-slate-200);
    --text-promotion-default: var(--color-yellow-600);
    --text-promotion-default-hover: var(--color-yellow-400);
    --text-promotion-default-subtle: var(--color-yellow-125);
    --text-promotion-default-subtle-hover: var(--color-yellow-150);
    --text-promotion-high-contrast: var(--color-yellow-900);
    --text-success-default: var(--semantic-success-600);
    --text-success-default-hover: var(--semantic-success-600);
    --text-success-high-contrast: var(--semantic-success-900);
    --text-success-on-color: var(--semantic-foundation-white);
    --text-success-on-color-hover: var(--semantic-success-125);
    --text-warning-default: var(--semantic-warning-600);
    --text-warning-default-hover: var(--semantic-warning-400);
    --text-warning-high-contrast: var(--semantic-warning-900);
    --text-warning-on-color: var(--semantic-warning-150);
    --text-warning-on-color-hover: var(--semantic-warning-125);
  }

  /* Typography Settings · Desktop */
  @media (min-width: 1024px) {
    :root {
      --body-12-letter-spacing: var(--size-25);
      --display-l-line-height: var(--size-1200);
      --display-l-size: var(--size-1100);
      --display-m-line-height: var(--size-900);
      --display-m-size: var(--size-800);
      --display-xl-line-height: 62px;
      --display-xl-size: var(--size-1200);
      --display-xxl-line-height: var(--size-1400);
      --display-xxl-size: var(--size-1300);
      --headline-1-line-height: 44px;
      --headline-1-size: var(--size-950);
      --headline-2-line-height: var(--size-1000);
      --headline-2-size: var(--size-900);
      --headline-3-line-height: var(--size-950);
      --headline-3-size: var(--size-800);
      --headline-4-line-height: var(--size-900);
      --headline-4-size: var(--size-700);
      --headline-5-6-line-height: var(--size-800);
      --headline-5-6-size: var(--size-500);
    }
  }

  /* Typography */
  .ds-body-12-regular {
    font-family: var(--body-12-font-family);
    font-weight: var(--body-12-font-weight-1);
    font-size: var(--body-12-size);
    line-height: var(--body-12-line-height);
    letter-spacing: var(--body-12-letter-spacing);
  }

  .ds-body-12-semibold {
    font-family: var(--body-12-font-family);
    font-weight: var(--body-12-font-weight-2);
    font-size: var(--body-12-size);
    line-height: var(--body-12-line-height);
    letter-spacing: var(--body-12-letter-spacing);
  }

  .ds-body-13-regular {
    font-family: var(--body-13-font-family);
    font-weight: var(--body-13-font-weight-1);
    font-size: var(--body-13-size);
    line-height: var(--body-13-line-height);
    letter-spacing: var(--body-13-letter-spacing);
  }

  .ds-body-13-semibold {
    font-family: var(--body-13-font-family);
    font-weight: var(--body-13-font-weight-2);
    font-size: var(--body-13-size);
    line-height: var(--body-13-line-height);
    letter-spacing: var(--body-13-letter-spacing);
  }

  .ds-body-14-regular {
    font-family: var(--body-14-font-family);
    font-weight: var(--body-14-font-weight-1);
    font-size: var(--body-14-size);
    line-height: var(--body-14-line-height);
    letter-spacing: var(--body-14-letter-spacing);
  }

  .ds-body-14-semibold {
    font-family: var(--body-14-font-family);
    font-weight: var(--body-14-font-weight-2);
    font-size: var(--body-14-size);
    line-height: var(--body-14-line-height);
    letter-spacing: var(--body-14-letter-spacing);
  }

  .ds-body-16-regular {
    font-family: var(--body-16-font-family);
    font-weight: var(--body-16-font-weight-1);
    font-size: var(--body-16-size);
    line-height: var(--body-16-line-height);
    letter-spacing: var(--body-16-letter-spacing);
  }

  .ds-body-16-semibold {
    font-family: var(--body-16-font-family);
    font-weight: var(--body-16-font-weight-2);
    font-size: var(--body-16-size);
    line-height: var(--body-16-line-height);
    letter-spacing: var(--body-16-letter-spacing);
  }

  .ds-body-18-regular {
    font-family: var(--body-18-font-family);
    font-weight: var(--body-18-font-weight-1);
    font-size: var(--body-18-size);
    line-height: var(--body-18-line-height);
    letter-spacing: var(--body-18-letter-spacing);
  }

  .ds-body-18-semibold {
    font-family: var(--body-18-font-family);
    font-weight: var(--body-18-font-weight-2);
    font-size: var(--body-18-size);
    line-height: var(--body-18-line-height);
    letter-spacing: var(--body-18-letter-spacing);
  }

  .ds-display {
    font-family: var(--display-m-font-family);
    font-weight: var(--display-m-font-weight);
    font-size: var(--display-m-size);
    line-height: var(--display-m-line-height);
    letter-spacing: var(--display-m-letter-spacing);
  }

  .ds-display-l {
    font-family: var(--display-l-font-family);
    font-weight: var(--display-l-font-weight);
    font-size: var(--display-l-size);
    line-height: var(--display-l-line-height);
    letter-spacing: var(--display-l-letter-spacing);
  }

  .ds-display-xl {
    font-family: var(--display-xl-font-family);
    font-weight: var(--display-xl-font-weight);
    font-size: var(--display-xl-size);
    line-height: var(--display-xl-line-height);
    letter-spacing: var(--display-xl-letter-spacing);
  }

  .ds-display-xxl {
    font-family: var(--display-xxl-font-family);
    font-weight: var(--display-xxl-font-weight);
    font-size: var(--display-xxl-size);
    line-height: var(--display-xxl-line-height);
    letter-spacing: var(--display-xxl-letter-spacing);
  }

  .ds-display-xxxl {
    font-family: var(--display-xxxl-font-family);
    font-weight: var(--display-xxxl-font-weight);
    font-size: var(--display-xxxl-size);
    line-height: var(--display-xxxl-line-height);
    letter-spacing: var(--display-xxxl-letter-spacing);
  }

  .ds-headline-1 {
    font-family: var(--headline-1-font-family);
    font-weight: var(--headline-1-font-weight);
    font-size: var(--headline-1-size);
    line-height: var(--headline-1-line-height);
    letter-spacing: var(--headline-1-letter-spacing);
  }

  .ds-headline-2 {
    font-family: var(--headline-2-font-family);
    font-weight: var(--headline-2-font-weight);
    font-size: var(--headline-2-size);
    line-height: var(--headline-2-line-height);
    letter-spacing: var(--headline-2-letter-spacing);
  }

  .ds-headline-3 {
    font-family: var(--headline-3-font-family);
    font-weight: var(--headline-3-font-weight);
    font-size: var(--headline-3-size);
    line-height: var(--headline-3-line-height);
    letter-spacing: var(--headline-3-letter-spacing);
  }

  .ds-headline-4 {
    font-family: var(--headline-4-font-family);
    font-weight: var(--headline-4-font-weight);
    font-size: var(--headline-4-size);
    line-height: var(--headline-4-line-height);
    letter-spacing: var(--headline-4-letter-spacing);
  }

  .ds-headline-5 {
    font-family: var(--headline-5-6-font-family);
    font-weight: var(--headline-5-6-font-weight);
    font-size: var(--headline-5-6-size);
    line-height: var(--headline-5-6-line-height);
    letter-spacing: var(--headline-5-6-letter-spacing);
  }

  .ds-headline-6 {
    font-family: var(--headline-5-6-font-family);
    font-weight: var(--headline-5-6-font-weight);
    font-size: var(--headline-5-6-size);
    line-height: var(--headline-5-6-line-height);
    letter-spacing: var(--headline-5-6-letter-spacing);
  }

  .ds-helper-text-12-regular {
    font-family: var(--helper-text-12-font-family);
    font-weight: var(--helper-text-12-font-weight-1);
    font-size: var(--helper-text-12-size);
    line-height: var(--helper-text-12-line-height);
    letter-spacing: var(--helper-text-12-letter-spacing);
  }

  .ds-helper-text-12-semibold {
    font-family: var(--helper-text-12-font-family);
    font-weight: var(--helper-text-12-font-weight-2);
    font-size: var(--helper-text-12-size);
    line-height: var(--helper-text-12-line-height);
    letter-spacing: var(--helper-text-12-letter-spacing);
  }

  .ds-subtitle-14-regular {
    font-family: var(--subtitle-14-font-family);
    font-weight: var(--subtitle-14-font-weight-1);
    font-size: var(--subtitle-14-size);
    line-height: var(--subtitle-14-line-height);
    letter-spacing: var(--subtitle-14-letter-spacing);
  }

  .ds-subtitle-14-semibold {
    font-family: var(--subtitle-14-font-family);
    font-weight: var(--subtitle-14-font-weight-2);
    font-size: var(--subtitle-14-size);
    line-height: var(--subtitle-14-line-height);
    letter-spacing: var(--subtitle-14-letter-spacing);
  }

  .ds-subtitle-18-regular {
    font-family: var(--subtitle-18-font-family);
    font-weight: var(--subtitle-18-font-weight-1);
    font-size: var(--subtitle-18-size);
    line-height: var(--subtitle-18-line-height);
    letter-spacing: var(--subtitle-18-letter-spacing);
  }

  .ds-subtitle-18-semibold {
    font-family: var(--subtitle-18-font-family);
    font-weight: var(--subtitle-18-font-weight-2);
    font-size: var(--subtitle-18-size);
    line-height: var(--subtitle-18-line-height);
    letter-spacing: var(--subtitle-18-letter-spacing);
  }
}