/* Brand */
:root {
  /* Mode 1 */
  /* color */
  --color-black: #000000;
  --color-complimentary: #fffdfb;
  --color-white: #ffffff;
  --color-blue-100: #e5e7ff;
  --color-blue-200: #bfc2ff;
  --color-blue-300: #8085ff;
  --color-blue-400: #4047ff;
  --color-blue-500: #000aff;
  --color-blue-600: #0008bf;
  --color-blue-700: #000580;
  --color-blue-800: #000340;
  --color-dark-green-100: #d1d6d1;
  --color-dark-green-200: #bac2ba;
  --color-dark-green-300: #a3aea3;
  --color-dark-green-400: #8d9a8c;
  --color-dark-green-50: #e8ebe8;
  --color-dark-green-500: #768575;
  --color-dark-green-600: #5f715e;
  --color-dark-green-700: #485d47;
  --color-dark-green-800: #1a3419;
  --color-green-100: #e8f5e9;
  --color-green-200: #a2d6a7;
  --color-green-300: #74c17a;
  --color-green-400: #45ad4e;
  --color-green-500: #179822;
  --color-green-600: #127a1b;
  --color-green-700: #0e5b14;
  --color-green-800: #093d0e;
  --color-grey---off-white-100: #fafafa;
  --color-grey---off-white-200: #f2f2f3;
  --color-grey---off-white-300: #dadadb;
  --color-grey---off-white-400: #c2c2c2;
  --color-grey---off-white-500: #a9a9aa;
  --color-grey---off-white-600: #919192;
  --color-grey---off-white-700: #616161;
  --color-grey---off-white-800: #303031;
  --color-grey---off-white-900: #181818;
  --color-orange-100: #fff0e5;
  --color-orange-200: #ffdabf;
  --color-orange-300: #ffb580;
  --color-orange-400: #ff9040;
  --color-orange-500: #ff6b00;
  --color-orange-600: #bf5000;
  --color-orange-700: #803600;
  --color-orange-800: #401b00;
  --color-red-100: #ffe5e5;
  --color-red-200: #ffbfbf;
  --color-red-300: #ff8080;
  --color-red-400: #ff4040;
  --color-red-500: #ff0000;
  --color-red-600: #bf0000;
  --color-red-700: #800000;
  --color-red-800: #400000;
  --color-sky-100: #e6f0f7;
  --color-sky-200: #cce1f0;
  --color-sky-300: #b3d2e8;
  --color-sky-400: #99c3e1;
  --color-sky-50: #f9fbfd;
  --color-sky-500: #80b4d9;
  --color-sky-600: #6690ae;
  --color-sky-700: #4d6c82;
  --color-sky-800: #334857;
  --color-slate-grey-200: #eff2f4;
  --color-slate-grey-300: #e0e5ea;
  --color-slate-grey-400: #c0cad5;
  --color-slate-grey-500: #a1b0bf;
  --color-slate-grey-600: #8195aa;
  --color-slate-grey-700: #627b95;
  --color-slate-grey-800: #4e6277;
  --color-spring-leaf-100: #e4eed9;
  --color-spring-leaf-200: #c9ddb3;
  --color-spring-leaf-300: #aecd8e;
  --color-spring-leaf-400: #93bc68;
  --color-spring-leaf-50: #f8fbf6;
  --color-spring-leaf-500: #78ab42;
  --color-spring-leaf-600: #608935;
  --color-spring-leaf-700: #486728;
  --color-spring-leaf-800: #30441a;
  --color-yellow-100: #fffce5;
  --color-yellow-200: #fff9bf;
  --color-yellow-300: #fff280;
  --color-yellow-400: #ffec40;
  --color-yellow-500: #ffe600;
  --color-yellow-600: #bfac00;
  --color-yellow-700: #807300;
  --color-yellow-800: #403900;
  /* number */
  --scale-0: 0rem;
  --scale-25: 0.0625rem;
  --scale-50: 0.125rem;
  --scale-100: 0.25rem;
  --scale-150: 0.375rem;
  --scale-200: 0.5rem;
  --scale-300: 0.75rem;
  --scale-400: 1rem;
  --scale-500: 1.25rem;
  --scale-600: 1.5rem;
  --scale-700: 1.75rem;
  --scale-800: 2rem;
  --scale-900: 2.25rem;
  --scale-1000: 2.5rem;
  --scale-1100: 2.75rem;
  --scale-1200: 3rem;
  --scale-1300: 3.25rem;
  --scale-1400: 3.5rem;
  --scale-1500: 3.75rem;
  --scale-1600: 4rem;
  --scale-1700: 4.25rem;
  --scale-1800: 4.5rem;
  --scale-1900: 4.75rem;
  --scale-2000: 5rem;
  --scale-2500: 6rem;
  --scale-3000: 8rem;
  --scale-3100: 16rem;
  /* string */
  --type-font-family-body: Inter;
  --type-font-family-heading: Urbana;
  --type-font-family-sub-heading: Inter;
  --type-font-weight-black: black;
  --type-font-weight-bold: bold;
  --type-font-weight-extralight: extralight;
  --type-font-weight-light: light;
  --type-font-weight-medium: medium;
  --type-font-weight-regular: regular;
  --type-font-weight-semi-bold: semi-bold;
  /* color */
  --error-100: var(--color-red-100);
  --error-200: var(--color-red-200);
  --error-300: var(--color-red-300);
  --error-400: var(--color-red-400);
  --error-600: var(--color-red-600);
  --error-700: var(--color-red-700);
  --error-800: var(--color-red-800);
  --error-default: var(--color-red-500);
  --highlight-primary-300: var(--color-sky-300);
  --highlight-primary-400: var(--color-sky-400);
  --highlight-primary-600: var(--color-sky-600);
  --highlight-primary-700: var(--color-sky-700);
  --highlight-primary-default: var(--color-sky-500);
  --highlight-secondary-300: var(--color-spring-leaf-50);
  --highlight-secondary-400: var(--color-spring-leaf-200);
  --highlight-secondary-600: var(--color-spring-leaf-600);
  --highlight-secondary-700: var(--color-spring-leaf-700);
  --highlight-secondary-default: var(--color-spring-leaf-400);
  --information-100: var(--color-blue-100);
  --information-200: var(--color-blue-200);
  --information-300: var(--color-blue-300);
  --information-400: var(--color-blue-400);
  --information-600: var(--color-blue-600);
  --information-700: var(--color-blue-700);
  --information-800: var(--color-blue-800);
  --information-default: var(--color-blue-500);
  --neutrals-100: var(--color-grey---off-white-100);
  --neutrals-200: var(--color-grey---off-white-200);
  --neutrals-300: var(--color-grey---off-white-300);
  --neutrals-400: var(--color-grey---off-white-400);
  --neutrals-500: var(--color-grey---off-white-500);
  --neutrals-700: var(--color-grey---off-white-700);
  --neutrals-800: var(--color-grey---off-white-800);
  --neutrals-900: var(--color-grey---off-white-900);
  --neutrals-black: var(--color-black);
  --neutrals-default: var(--color-grey---off-white-600);
  --neutrals-white: var(--color-white);
  --primary-100: var(--color-sky-50);
  --primary-200: var(--color-sky-200);
  --primary-300: var(--color-sky-300);
  --primary-400: var(--color-sky-400);
  --primary-600: var(--color-sky-600);
  --primary-700: var(--color-sky-700);
  --primary-800: var(--color-sky-800);
  --primary-default: var(--color-sky-500);
  --quaternary-300: var(--color-spring-leaf-50);
  --quaternary-400: var(--color-spring-leaf-100);
  --quaternary-600: var(--color-spring-leaf-600);
  --quaternary-700: var(--color-spring-leaf-700);
  --quaternary-default: var(--color-spring-leaf-500);
  --secondary-100: var(--color-dark-green-100);
  --secondary-200: var(--color-dark-green-200);
  --secondary-300: var(--color-dark-green-300);
  --secondary-400: var(--color-dark-green-400);
  --secondary-50: var(--color-dark-green-50);
  --secondary-600: var(--color-dark-green-600);
  --secondary-700: var(--color-dark-green-700);
  --secondary-800: var(--color-dark-green-800);
  --secondary-default: var(--color-dark-green-500);
  --success-100: var(--color-green-100);
  --success-200: var(--color-green-200);
  --success-300: var(--color-green-300);
  --success-400: var(--color-green-400);
  --success-600: var(--color-green-600);
  --success-700: var(--color-green-700);
  --success-800: var(--color-green-800);
  --success-default: var(--color-green-500);
  --tertiary-100: var(--color-slate-grey-200);
  --tertiary-200: var(--color-slate-grey-200);
  --tertiary-300: var(--color-slate-grey-300);
  --tertiary-400: var(--color-slate-grey-400);
  --tertiary-50: var(--color-slate-grey-200);
  --tertiary-600: var(--color-slate-grey-600);
  --tertiary-700: var(--color-slate-grey-700);
  --tertiary-800: var(--color-slate-grey-800);
  --tertiary-default: var(--color-slate-grey-500);
  --warning-100: var(--color-orange-100);
  --warning-200: var(--color-orange-200);
  --warning-300: var(--color-orange-300);
  --warning-400: var(--color-orange-400);
  --warning-600: var(--color-orange-600);
  --warning-700: var(--color-orange-700);
  --warning-800: var(--color-orange-800);
  --warning-default: var(--color-orange-500);
  /* number */
  --border-radius-none: var(--scale-0);
  --border-radius-sm: var(--scale-50);
  --border-radius-md: var(--scale-100);
  --border-radius-lg: var(--scale-200);
  --border-radius-xl: var(--scale-400);
  --border-radius-2xl: var(--scale-500);
  --border-radius-3xl: var(--scale-800);
  --border-radius-round: var(--scale-2000);
  --border-width-none: var(--scale-0);
  --border-width-sm: var(--scale-25);
  --border-width-md: var(--scale-50);
  --border-width-lg: var(--scale-100);
}

/* mapped */
[data-theme="light"] {
  /* light */
  /* color */
  --border-action-inverse: var(--neutrals-200);
  --border-action-inverse-hover: var(--neutrals-100);
  --border-action1: var(--highlight-primary-default);
  --border-action1-hover: var(--highlight-primary-400);
  --border-action2: var(--tertiary-default);
  --border-action2-hover: var(--tertiary-400);
  --border-action3: #5f756e;
  --border-action3-hover: #4c5e58;
  --border-disabled: var(--neutrals-300);
  --border-error: var(--error-default);
  --border-focus: var(--highlight-primary-700);
  --border-focus-inverse: var(--neutrals-white);
  --border-highlight: var(--highlight-secondary-default);
  --border-information: var(--information-default);
  --border-primary: var(--neutrals-300);
  --border-secondary: var(--primary-default);
  --border-success: var(--success-default);
  --border-warning: var(--warning-default);
  --icon-action1: var(--tertiary-700);
  --icon-action1-hover: var(--tertiary-800);
  --icon-action2: var(--tertiary-700);
  --icon-action2-hover: var(--tertiary-800);
  --icon-error: var(--error-default);
  --icon-information: var(--information-default);
  --icon-inverse: var(--neutrals-100);
  --icon-on-action: var(--neutrals-800);
  --icon-on-disabled: var(--neutrals-700);
  --icon-primary: var(--neutrals-700);
  --icon-success: var(--success-default);
  --icon-warning: var(--warning-default);
  --surface-action-inverse: var(--neutrals-200);
  --surface-action-inverse-hover: var(--neutrals-100);
  --surface-action1: var(--highlight-primary-400);
  --surface-action1-hover: var(--highlight-primary-default);
  --surface-action2: var(--tertiary-200);
  --surface-action2-hover: var(--tertiary-300);
  --surface-action3: #b88aff;
  --surface-action3-hover: #8a5bdd;
  --surface-disabled: var(--neutrals-100);
  --surface-disabled-selected: var(--neutrals-500);
  --surface-error: var(--error-100);
  --surface-highlight: var(--highlight-secondary-default);
  --surface-information: var(--information-100);
  --surface-modal: var(--neutrals-white);
  --surface-page: var(--neutrals-white);
  --surface-primary: var(--neutrals-200);
  --surface-quaternary: var(--neutrals-white);
  --surface-secondary: var(--primary-800);
  --surface-success: var(--success-100);
  --surface-tertiary: var(--quaternary-400);
  --surface-warning: var(--warning-100);
  --text-action1: var(--neutrals-800);
  --text-action1-hover: var(--neutrals-900);
  --text-action2: var(--tertiary-700);
  --text-action2-hover: var(--tertiary-800);
  --text-body-primary: var(--neutrals-700);
  --text-body-secondary: var(--neutrals-900);
  --text-disabled: var(--neutrals-500);
  --text-error: var(--error-default);
  --text-headings-highlight: var(--secondary-600);
  --text-headings-primary: var(--neutrals-800);
  --text-headings-secondary: var(--primary-800);
  --text-information: var(--information-default);
  --text-inverse: var(--neutrals-100);
  --text-on-action: var(--neutrals-800);
  --text-on-disabled: var(--neutrals-700);
  --text-on-image: var(--neutrals-100);
  --text-sub-headings: var(--primary-700);
  --text-sub-headings-2: var(--secondary-default);
  --text-success: var(--success-default);
  --text-warning: var(--warning-default);
}

  [data-theme="dark"] {
  /* color */
  --border-action-inverse: #ffffff;
  --border-action-inverse-hover: #ffffff;
  --border-action1: var(--primary-default);
  --border-action1-hover: var(--primary-600);
  --border-action2: #ffffff;
  --border-action2-hover: #ffffff;
  --border-action3: #ffffff;
  --border-action3-hover: #ffffff;
  --border-disabled: var(--neutrals-300);
  --border-error: var(--error-default);
  --border-focus: var(--primary-600);
  --border-focus-inverse: #ffffff;
  --border-highlight: #ffffff;
  --border-information: var(--information-default);
  --border-primary: var(--neutrals-200);
  --border-secondary: var(--primary-default);
  --border-success: var(--success-default);
  --border-warning: var(--warning-default);
  --icon-action1: #ffffff;
  --icon-action1-hover: #ffffff;
  --icon-action2: #ffffff;
  --icon-action2-hover: #ffffff;
  --icon-error: var(--error-default);
  --icon-information: var(--information-default);
  --icon-inverse: #ffffff;
  --icon-on-action: #ffffff;
  --icon-on-disabled: #ffffff;
  --icon-primary: var(--neutrals-default);
  --icon-success: var(--success-default);
  --icon-warning: var(--warning-default);
  --surface-action-inverse: #ffffff;
  --surface-action-inverse-hover: #ffffff;
  --surface-action1: var(--primary-default);
  --surface-action1-hover: var(--primary-600);
  --surface-action2: #ffffff;
  --surface-action2-hover: #ffffff;
  --surface-action3: #ffffff;
  --surface-action3-hover: #ffffff;
  --surface-disabled: var(--neutrals-100);
  --surface-disabled-selected: #ffffff;
  --surface-error: var(--error-100);
  --surface-highlight: #ffffff;
  --surface-information: var(--information-100);
  --surface-modal: #ffffff;
  --surface-page: var(--neutrals-white);
  --surface-primary: var(--neutrals-white);
  --surface-quaternary: #ffffff;
  --surface-secondary: #ffffff;
  --surface-success: var(--success-100);
  --surface-tertiary: #ffffff;
  --surface-warning: var(--warning-100);
  --text-action1: var(--primary-600);
  --text-action1-hover: var(--primary-700);
  --text-action2: var(--primary-600);
  --text-action2-hover: var(--primary-700);
  --text-body-primary: var(--neutrals-700);
  --text-body-secondary: var(--neutrals-700);
  --text-disabled: var(--neutrals-400);
  --text-error: var(--error-default);
  --text-headings-highlight: #ffffff;
  --text-headings-primary: var(--neutrals-800);
  --text-headings-secondary: var(--neutrals-800);
  --text-information: var(--information-default);
  --text-inverse: #ffffff;
  --text-on-action: var(--neutrals-white);
  --text-on-disabled: var(--neutrals-700);
  --text-on-image: var(--neutrals-white);
  --text-sub-headings: var(--neutrals-800);
  --text-sub-headings-2: var(--neutrals-800);
  --text-success: var(--success-default);
  --text-warning: var(--warning-default);
}
/* Responsive */
[data-theme="desktop"] {
  /* number */
  --fontsize-body-sm: 0.75rem;
  --fontsize-body-md: 1rem;
  --fontsize-body-lg: 1.25rem;
  --fontsize-heading-h6: 1.25rem;
  --fontsize-heading-h5: 1.5rem;
  --fontsize-heading-h4: 2rem;
  --fontsize-heading-h3: 2.5rem;
  --fontsize-heading-h2: 3rem;
  --fontsize-heading-h1: 3.75rem;
  --line-height-body-sm: 1.25rem;
  --line-height-body-md: 1.5rem;
  --line-height-body-lg: 2rem;
  --line-height-heading-h6: 1.5rem;
  --line-height-heading-h5: 1.75rem;
  --line-height-heading-h4: 2.5rem;
  --line-height-heading-h3: 3rem;
  --line-height-heading-h2: 3.5rem;
  --line-height-heading-h1: 4.5rem;
  --paragraph-spacing-body-md: 1rem;
  --paragraph-spacing-body-sm: 1rem;
  --paragraph-spacing-body-lg: 1.25rem;
  --paragraph-spacing-heading-h6: 1.5rem;
  --paragraph-spacing-heading-h5: 1.75rem;
  --paragraph-spacing-heading-h4: 2rem;
  --paragraph-spacing-heading-h3: 2.25rem;
  --paragraph-spacing-heading-h2: 2.5rem;
  --paragraph-spacing-heading-h1: 3rem;
  --spacing-3xs: var(--scale-50);
  --spacing-2xs: var(--scale-100);
  --spacing-xs: var(--scale-200);
  --spacing-s: var(--scale-300);
  --spacing-md: var(--scale-400);
  --spacing-lg: var(--scale-600);
  --spacing-xl: var(--scale-800);
  --spacing-2xl: var(--scale-1200);
  --spacing-3xl: var(--scale-1600);
  --spacing-cards-modals-4xs-none: var(--scale-200);
  --spacing-cards-modals-sm-2xs: var(--scale-1200);
  --spacing-cards-modals-sm-xl: var(--scale-1200);
  --spacing-cards-modals-md-sm: var(--scale-1400);
  --spacing-cards-modals-xl-md: var(--scale-2500);
  --spacing-cards-modals-xl-sm: var(--scale-2500);
  --spacing-cards-modals-xl-xl: var(--scale-2500);
  --spacing-cards-modals-2xl-xl: var(--scale-3000);
  --spacing-cards-modals-3xl-2xl: var(--scale-3100);
  --spacing-cards-modals-3xl-xl: var(--scale-3100);
  --spacing-device-size-frame: 90rem;
  --spacing-form-field-width: 0rem;
  --spacing-form-gap: 0rem;
  --spacing-form-vertical-spacing: 0rem;
  --spacing-form-horizontal-spacing: 4rem;
  --spacing-form-width: 54.75rem;
  --spacing-jumper-sm-xl: var(--scale-1200);
  --spacing-jumper-md-sm: var(--scale-1400);
  --spacing-jumper-xl-md: var(--scale-2500);
  --spacing-jumper-xl-sm: var(--scale-2500);
  --spacing-jumper-xl-xl: var(--scale-2500);
  --spacing-jumper-2xl-xl: var(--scale-3000);
  --spacing-jumper-3xl-2xl: var(--scale-3100);
  --spacing-jumper-3xl-xl: var(--scale-3100);
  --spacing-module-xs-2xs: var(--scale-600);
  --spacing-module-sm-2xs: var(--scale-1200);
  --spacing-module-sm-xl: var(--scale-1200);
  --spacing-module-sm-xs: var(--scale-1200);
  --spacing-module-md-sm: var(--scale-1400);
  --spacing-module-xl-md: var(--scale-2500);
  --spacing-module-xl-sm: var(--scale-2500);
  --spacing-module-xl-xl: var(--scale-2500);
  --spacing-module-2xl-xl: var(--scale-3000);
  --spacing-module-3xl-2xl: var(--scale-3100);
  --spacing-module-3xl-xl: var(--scale-3100);
}
  /* tablet */
  [data-theme="tablet"] {
  --fontsize-body-sm: 0.75rem;
  --fontsize-body-md: 1rem;
  --fontsize-body-lg: 1.25rem;
  --fontsize-heading-h6: 1.25rem;
  --fontsize-heading-h5: 1.5rem;
  --fontsize-heading-h4: 1.75rem;
  --fontsize-heading-h3: 2rem;
  --fontsize-heading-h2: 2.5rem;
  --fontsize-heading-h1: 3rem;
  --line-height-body-sm: 1.25rem;
  --line-height-body-md: 1.5rem;
  --line-height-body-lg: 2rem;
  --line-height-heading-h6: 1.5rem;
  --line-height-heading-h5: 1.75rem;
  --line-height-heading-h4: 2rem;
  --line-height-heading-h3: 2.5rem;
  --line-height-heading-h2: 3rem;
  --line-height-heading-h1: 3.5rem;
  --paragraph-spacing-body-md: 1rem;
  --paragraph-spacing-body-sm: 1rem;
  --paragraph-spacing-body-lg: 1.25rem;
  --paragraph-spacing-heading-h6: 1.5rem;
  --paragraph-spacing-heading-h5: 1.75rem;
  --paragraph-spacing-heading-h4: 2rem;
  --paragraph-spacing-heading-h3: 2.25rem;
  --paragraph-spacing-heading-h2: 2.5rem;
  --paragraph-spacing-heading-h1: 3rem;
  --spacing-3xs: var(--scale-50);
  --spacing-2xs: var(--scale-100);
  --spacing-xs: var(--scale-200);
  --spacing-lg: var(--scale-300);
  --spacing-s: var(--scale-300);
  --spacing-md: var(--scale-400);
  --spacing-xl: var(--scale-800);
  --spacing-2xl: var(--scale-1200);
  --spacing-3xl: var(--scale-1600);
  --spacing-cards-modals-4xs-none: var(--scale-0);
  --spacing-cards-modals-sm-2xs: var(--scale-600);
  --spacing-cards-modals-md-sm: var(--scale-1200);
  --spacing-cards-modals-sm-xl: var(--scale-1200);
  --spacing-cards-modals-xl-md: var(--scale-1400);
  --spacing-cards-modals-xl-sm: var(--scale-2500);
  --spacing-cards-modals-xl-xl: var(--scale-2500);
  --spacing-cards-modals-2xl-xl: var(--scale-3000);
  --spacing-cards-modals-3xl-2xl: var(--scale-3000);
  --spacing-cards-modals-3xl-xl: var(--scale-3000);
  --spacing-device-size-frame: 46.5rem;
  --spacing-form-field-width: 0rem;
  --spacing-form-gap: 0rem;
  --spacing-form-vertical-spacing: 0rem;
  --spacing-form-horizontal-spacing: 4rem;
  --spacing-form-width: 38.75rem;
  --spacing-jumper-md-sm: var(--scale-1200);
  --spacing-jumper-sm-xl: var(--scale-1200);
  --spacing-jumper-xl-md: var(--scale-1400);
  --spacing-jumper-xl-sm: var(--scale-2500);
  --spacing-jumper-xl-xl: var(--scale-2500);
  --spacing-jumper-2xl-xl: var(--scale-3000);
  --spacing-jumper-3xl-2xl: var(--scale-3000);
  --spacing-jumper-3xl-xl: var(--scale-3000);
  --spacing-module-xs-2xs: var(--scale-400);
  --spacing-module-sm-2xs: var(--scale-600);
  --spacing-module-sm-xs: var(--scale-600);
  --spacing-module-md-sm: var(--scale-1200);
  --spacing-module-sm-xl: var(--scale-1200);
  --spacing-module-xl-md: var(--scale-1400);
  --spacing-module-xl-sm: var(--scale-2500);
  --spacing-module-xl-xl: var(--scale-2500);
  --spacing-module-2xl-xl: var(--scale-3000);
  --spacing-module-3xl-2xl: var(--scale-3000);
  --spacing-module-3xl-xl: var(--scale-3000);
  }
  /* mobile */
  [data-theme="mobile"] {
  --fontsize-body-sm: 0.75rem;
  --fontsize-body-md: 1rem;
  --fontsize-body-lg: 1.25rem;
  --fontsize-heading-h5: 1.25rem;
  --fontsize-heading-h6: 1.25rem;
  --fontsize-heading-h3: 1.5rem;
  --fontsize-heading-h4: 1.5rem;
  --fontsize-heading-h2: 1.75rem;
  --fontsize-heading-h1: 2rem;
  --line-height-body-sm: 1.25rem;
  --line-height-body-md: 1.5rem;
  --line-height-body-lg: 2rem;
  --line-height-heading-h6: 1.25rem;
  --line-height-heading-h5: 1.5rem;
  --line-height-heading-h3: 1.75rem;
  --line-height-heading-h4: 1.75rem;
  --line-height-heading-h2: 2rem;
  --line-height-heading-h1: 2.5rem;
  --paragraph-spacing-body-md: 1rem;
  --paragraph-spacing-body-sm: 1rem;
  --paragraph-spacing-body-lg: 1.25rem;
  --paragraph-spacing-heading-h6: 1.5rem;
  --paragraph-spacing-heading-h5: 1.75rem;
  --paragraph-spacing-heading-h4: 2rem;
  --paragraph-spacing-heading-h3: 2.25rem;
  --paragraph-spacing-heading-h2: 2.5rem;
  --paragraph-spacing-heading-h1: 3rem;
  --spacing-3xs: var(--scale-50);
  --spacing-2xs: var(--scale-100);
  --spacing-xs: var(--scale-200);
  --spacing-lg: var(--scale-300);
  --spacing-s: var(--scale-300);
  --spacing-md: var(--scale-400);
  --spacing-xl: var(--scale-800);
  --spacing-2xl: var(--scale-1200);
  --spacing-3xl: var(--scale-1600);
  --spacing-cards-modals-4xs-none: var(--scale-0);
  --spacing-cards-modals-sm-2xs: var(--scale-400);
  --spacing-cards-modals-md-sm: var(--scale-1200);
  --spacing-cards-modals-xl-sm: var(--scale-1200);
  --spacing-cards-modals-xl-md: var(--scale-1400);
  --spacing-cards-modals-2xl-xl: var(--scale-2500);
  --spacing-cards-modals-3xl-xl: var(--scale-2500);
  --spacing-cards-modals-sm-xl: var(--scale-2500);
  --spacing-cards-modals-xl-xl: var(--scale-2500);
  --spacing-cards-modals-3xl-2xl: var(--scale-3000);
  --spacing-device-size-frame: 23.4375rem;
  --spacing-form-field-width: 0rem;
  --spacing-form-gap: 0rem;
  --spacing-form-vertical-spacing: 0rem;
  --spacing-form-horizontal-spacing: 1.125rem;
  --spacing-form-width: 22.1875rem;
  --spacing-jumper-md-sm: var(--scale-1200);
  --spacing-jumper-xl-sm: var(--scale-1200);
  --spacing-jumper-xl-md: var(--scale-1400);
  --spacing-jumper-2xl-xl: var(--scale-2500);
  --spacing-jumper-3xl-xl: var(--scale-2500);
  --spacing-jumper-sm-xl: var(--scale-2500);
  --spacing-jumper-xl-xl: var(--scale-2500);
  --spacing-jumper-3xl-2xl: var(--scale-3000);
  --spacing-module-sm-2xs: var(--scale-400);
  --spacing-module-xs-2xs: var(--scale-400);
  --spacing-module-sm-xs: var(--scale-600);
  --spacing-module-md-sm: var(--scale-1200);
  --spacing-module-xl-sm: var(--scale-1200);
  --spacing-module-xl-md: var(--scale-1400);
  --spacing-module-2xl-xl: var(--scale-2500);
  --spacing-module-3xl-xl: var(--scale-2500);
  --spacing-module-sm-xl: var(--scale-2500);
  --spacing-module-xl-xl: var(--scale-2500);
  --spacing-module-3xl-2xl: var(--scale-3000);
  }
  [data-theme="desktop-lg"] {
  /* number */
  --fontsize-body-sm: 0.75rem;
  --fontsize-body-md: 1rem;
  --fontsize-body-lg: 1.25rem;
  --fontsize-heading-h6: 1.125rem;
  --fontsize-heading-h5: 1.5rem;
  --fontsize-heading-h4: 2rem;
  --fontsize-heading-h3: 2.5rem;
  --fontsize-heading-h2: 3rem;
  --fontsize-heading-h1: 4.5rem;
  --line-height-body-sm: 1.25rem;
  --line-height-body-md: 1.5rem;
  --line-height-body-lg: 2rem;
  --line-height-heading-h6: 1.5rem;
  --line-height-heading-h5: 1.75rem;
  --line-height-heading-h4: 2.5rem;
  --line-height-heading-h3: 3rem;
  --line-height-heading-h2: 3.5rem;
  --line-height-heading-h1: 4.5rem;
  --paragraph-spacing-body-md: 1rem;
  --paragraph-spacing-body-sm: 1rem;
  --paragraph-spacing-body-lg: 1.25rem;
  --paragraph-spacing-heading-h6: 1.5rem;
  --paragraph-spacing-heading-h5: 1.75rem;
  --paragraph-spacing-heading-h4: 2rem;
  --paragraph-spacing-heading-h3: 2.25rem;
  --paragraph-spacing-heading-h2: 2.5rem;
  --paragraph-spacing-heading-h1: 3rem;
  --spacing-3xs: var(--scale-50);
  --spacing-2xs: var(--scale-100);
  --spacing-xs: var(--scale-200);
  --spacing-lg: var(--scale-300);
  --spacing-s: var(--scale-300);
  --spacing-md: var(--scale-400);
  --spacing-xl: var(--scale-800);
  --spacing-2xl: var(--scale-1200);
  --spacing-3xl: var(--scale-1600);
  --spacing-cards-modals-4xs-none: var(--scale-200);
  --spacing-cards-modals-md-sm: var(--scale-1200);
  --spacing-cards-modals-sm-2xs: var(--scale-1200);
  --spacing-cards-modals-sm-xl: var(--scale-1200);
  --spacing-cards-modals-xl-sm: var(--scale-1200);
  --spacing-cards-modals-xl-md: var(--scale-1400);
  --spacing-cards-modals-2xl-xl: var(--scale-2500);
  --spacing-cards-modals-3xl-xl: var(--scale-2500);
  --spacing-cards-modals-xl-xl: var(--scale-2500);
  --spacing-cards-modals-3xl-2xl: var(--scale-3000);
  --spacing-device-size-frame: 120rem;
  --spacing-form-field-width: 0rem;
  --spacing-form-gap: 0rem;
  --spacing-form-vertical-spacing: 0rem;
  --spacing-form-horizontal-spacing: 1.125rem;
  --spacing-form-width: 22.1875rem;
  --spacing-jumper-md-sm: var(--scale-1200);
  --spacing-jumper-xl-sm: var(--scale-1200);
  --spacing-jumper-xl-md: var(--scale-1400);
  --spacing-jumper-2xl-xl: var(--scale-2500);
  --spacing-jumper-3xl-xl: var(--scale-2500);
  --spacing-jumper-sm-xl: var(--scale-2500);
  --spacing-jumper-xl-xl: var(--scale-2500);
  --spacing-jumper-3xl-2xl: var(--scale-3000);
  --spacing-module-xs-2xs: var(--scale-600);
  --spacing-module-md-sm: var(--scale-1200);
  --spacing-module-xl-sm: var(--scale-1200);
  --spacing-module-sm-2xs: var(--scale-1400);
  --spacing-module-sm-xs: var(--scale-1400);
  --spacing-module-xl-md: var(--scale-1400);
  --spacing-module-2xl-xl: var(--scale-2500);
  --spacing-module-3xl-xl: var(--scale-2500);
  --spacing-module-sm-xl: var(--scale-2500);
  --spacing-module-xl-xl: var(--scale-2500);
  --spacing-module-3xl-2xl: var(--scale-3000);
}