:root {
  /* Scale Values */
  --scale-0: 0px;
  --scale-1: 1px;
  --scale-2: 2px;
  --scale-3: 3px;
  --scale-4: 4px;
  --scale-6: 6px;
  --scale-8: 8px;
  --scale-10: 10px;
  --scale-12: 12px;
  --scale-13: 13px;
  --scale-14: 14px;
  --scale-16: 16px;
  --scale-18: 18px;
  --scale-20: 20px;
  --scale-22: 22px;
  --scale-24: 24px;
  --scale-26: 26px;
  --scale-28: 28px;
  --scale-30: 30px;
  --scale-32: 32px;
  --scale-34: 34px;
  --scale-36: 36px;
  --scale-38: 38px;
  --scale-40: 40px;
  --scale-44: 44px;
  --scale-48: 48px;
  --scale-56: 56px;
  --scale-60: 60px;
  --scale-64: 64px;
  --scale-96: 96px;
  --scale-54: 54px;
  --scale-108: 108px;
  --scale-80: 80px;
  --scale-42: 42px;
  --scale-46: 46px;
  --scale-50: 50px;
  --scale-102: 102px;
  /* Color Variables */
  --color-white-global: #FFFFFF;
  --color-black-global: #000000;
  --color-blue-10: #B2DBFF;
  --color-blue-50: #80C3FF;
  --color-blue-100: #6AA8E1;
  --color-blue-200: #538EC2;
  --color-blue-300: #3D73A4;
  --color-blue-400: #265985;
  --color-blue-500: #103E67;
  --color-blue-600: #0D3354;
  --color-blue-700: #0A2741;
  --color-blue-800: #071C2D;
  --color-blue-900: #04101A;
  --color-cool-gray-10: #F4F7F9;
  --color-cool-gray-50: #EDF2F6;
  --color-cool-gray-100: #DAE1E8;
  --color-cool-gray-200: #C6D1DA;
  --color-cool-gray-300: #B3C0CD;
  --color-cool-gray-400: #9FB0BF;
  --color-cool-gray-500: #8C9FB1;
  --color-cool-gray-600: #697785;
  --color-cool-gray-700: #465059;
  --color-cool-gray-800: #23282C;
  --color-cool-gray-900: #000000;
  --color-light-blue-50: #F5FAFF;
  --color-light-blue-100: #F1F8FF;
  --color-light-blue-200: #E3F2FF;
  --color-light-blue-300: #D5EBFF;
  --color-light-blue-400: #C7E4FF;
  --color-light-blue-500: #B8DEFF;
  --color-light-blue-600: #AAD7FF;
  --color-light-blue-700: #9CD0FF;
  --color-light-blue-800: #8ECAFF;
  --color-light-blue-900: #80C3FF;
  --color-calm-blue-50: #EDF2F6;
  --color-calm-blue-100: #E4EAEE;
  --color-calm-blue-200: #CAD4DD;
  --color-calm-blue-300: #AFBFCC;
  --color-calm-blue-400: #95A9BB;
  --color-calm-blue-500: #7A94AB;
  --color-calm-blue-600: #607E9A;
  --color-calm-blue-700: #456989;
  --color-calm-blue-800: #2B5378;
  --color-calm-blue-900: #103E67;
  --color-red-100: #F8D7DA;
  --color-red-200: #F1AEB5;
  --color-red-300: #EA868F;
  --color-red-400: #E35D6A;
  --color-red-500: #DC3545;
  --color-red-600: #B02A37;
  --color-red-700: #842029;
  --color-red-800: #58151C;
  --color-red-900: #2C0B0E;
  --color-orange-100: #FFE5D0;
  --color-orange-200: #FECBA1;
  --color-orange-300: #FEB272;
  --color-orange-400: #FD9843;
  --color-orange-500: #FD7E14;
  --color-orange-600: #CA6510;
  --color-orange-700: #984C0C;
  --color-orange-800: #653208;
  --color-orange-900: #331904;
  --color-green-100: #D1E7DD;
  --color-green-200: #A3CFBB;
  --color-green-300: #75B798;
  --color-green-400: #479F76;
  --color-green-500: #198754;
  --color-green-600: #146C43;
  --color-green-700: #0F5132;
  --color-green-800: #0A3622;
  --color-green-900: #051B11;
  --color-gray-10: #F7F7F7;
  --color-gray-50: #F1F1F1;
  --color-gray-100: #E1E1E1;
  --color-gray-200: #D0D0D0;
  --color-gray-300: #C0C0C0;
  --color-gray-400: #AFAFAF;
  --color-gray-500: #A6A6A6;
  --color-gray-600: #808080;
  --color-gray-700: #595959;
  --color-gray-800: #333333;
  --color-gray-900: #262626;
  --color-gold: #F5CC84;


  /* Breakpoints */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* Font Families */
  --font-family-Display: Poppins, sans-serif;
  --font-family-Headline: Poppins, sans-serif;
  --font-family-Title: Poppins, sans-serif;
  --font-family-Body: Poppins, sans-serif;
  --font-family-Label: Poppins, sans-serif;
  --font-family-Menu: Poppins, sans-serif;
  /* Responsive Variables - Desktop (default) */
  /* Design Tokens */
  /* TextColor */
  --textColor-display: var(--color-blue-700);
  --textColor-headline: var(--color-blue-700);
  --textColor-body: var(--color-blue-700);
  --textColor-body-light: var(--color-cool-gray-600);
  --textColor-title: var(--color-cool-gray-900);
  --textColor-primary: var(--color-blue-600);
  --textColor-secondary: var(--color-cool-gray-500);
  --textColor-disable: var(--color-cool-gray-200);
  --textColor-error: var(--color-red-500);
  --textColor-warning: var(--color-orange-400);
  --textColor-success: var(--color-green-500);
  --textColor-link: var(--color-blue-200);
  --textColor-muted: var(--color-cool-gray-500);

  /* BgColor */
  --bgColor-white: var(--color-white-global);
  --bgColor-placeholder: var(--color-gray-50);
  --bgColor-page: var(--color-cool-gray-50);
  --bgColor-primary: var(--color-blue-10);
  --bgColor-secondary: var(--color-cool-gray-50);
  --bgColor-disable: var(--color-cool-gray-200);
  --bgColor-error: var(--color-red-100);
  --bgColor-warning: var(--color-orange-100);
  --bgColor-success: var(--color-green-100);
  --bgColor-info: var(--color-blue-50);
  --bgColor-light: var(--color-cool-gray-10);
  --bgColor-dark: var(--color-blue-700);

  /* IconColor */
  --iconColor-primary: var(--color-blue-700);
  --iconColor-hover: var(--color-blue-200);
  --iconColor-secondary: var(--color-cool-gray-400);
  --iconColor-placeholder: var(--color-gray-500);
  --iconColor-disable: var(--color-cool-gray-200);
  --iconColor-error: var(--color-red-500);
  --iconColor-warning: var(--color-orange-400);
  --iconColor-success: var(--color-green-500);
  --iconColor-light: var(--color-cool-gray-10);
  --iconColor-dark: var(--color-cool-gray-900);

  /* StrokeColor */
  --strokeColor-primary: var(--color-blue-700);
  --strokeColor-secondary: var(--color-cool-gray-400);
  --strokeColor-placeholder: var(--color-gray-400);
  --strokeColor-disable: var(--color-cool-gray-200);
  --strokeColor-error: var(--color-red-500);
  --strokeColor-warning: var(--color-orange-400);
  --strokeColor-success: var(--color-green-500);
  --strokeColor-light: var(--color-cool-gray-10);
  --strokeColor-dark: var(--color-cool-gray-900);

  /* BadgeColor */
  --badgeColor-primary: var(--color-blue-700);
  --badgeColor-secondary: var(--color-cool-gray-400);
  --badgeColor-success: var(--color-green-500);
  --badgeColor-error: var(--color-red-500);
  --badgeColor-warning: var(--color-orange-400);
  --badgeColor-light: var(--color-cool-gray-50);
  --badgeColor-dark: var(--color-cool-gray-900);

  /* FinishesColor */
  --finishesColor-chrome: var(--color-gray-300);
  --finishesColor-gold: var(--color-gold);
  --finishesColor-black: var(--color-black-global);

  /* Button-primary-light */
  --button-primary-light-default: var(--color-blue-600);
  --button-primary-light-hover: var(--color-blue-600);
  --button-primary-light-pressed: var(--color-blue-800);
  --button-primary-light-focused: var(--color-blue-100);
  --button-primary-light-disabled: var(--color-cool-gray-300);
  --button-primary-light-label-default: var(--color-blue-600);
  --button-primary-light-label-inverse: var(--color-white-global);
  --button-primary-light-icon-default: var(--color-blue-600);
  --button-primary-light-icon-inverse: var(--color-white-global);

  /* Button-primary-dark */
  --button-primary-dark-default: var(--color-white-global);
  --button-primary-dark-hover: var(--color-white-global);
  --button-primary-dark-pressed: var(--color-cool-gray-100);
  --button-primary-dark-focused: var(--color-blue-100);
  --button-primary-dark-disabled: var(--color-cool-gray-600);
  --button-primary-dark-label-default: var(--color-white-global);
  --button-primary-dark-label-inverse: var(--color-blue-600);
  --button-primary-dark-icon-default: var(--color-white-global);
  --button-primary-dark-icon-inverse: var(--color-blue-600);

  /* Button-secondary-light */
  --button-secondary-light-default: var(--color-blue-600);
  --button-secondary-light-hover: var(--color-blue-700);
  --button-secondary-light-pressed: var(--color-blue-800);
  --button-secondary-light-focused: var(--color-blue-100);
  --button-secondary-light-disabled: var(--color-cool-gray-200);
  --button-secondary-light-label-default: var(--color-white-global);
  --button-secondary-light-label-inverse: var(--color-blue-600);
  --button-secondary-light-icon-default: var(--color-white-global);
  --button-secondary-light-icon-inverse: var(--color-blue-600);

  /* Button-secondary-dark */
  --button-secondary-dark-default: var(--color-white-global);
  --button-secondary-dark-hover: var(--color-cool-gray-100);
  --button-secondary-dark-pressed: var(--color-cool-gray-200);
  --button-secondary-dark-focused: var(--color-blue-100);
  --button-secondary-dark-disabled: var(--color-cool-gray-500);
  --button-secondary-dark-disabled-2: var(--color-cool-gray-300);
  --button-secondary-dark-label-default: var(--color-blue-600);
  --button-secondary-dark-label-inverse: var(--color-white-global);
  --button-secondary-dark-icon-default: var(--color-blue-600);
  --button-secondary-dark-icon-inverse: var(--color-white-global);


  /* Typography Presets */
  --typography-display-l-font-family: var(--font-family-Display);
  --typography-display-l-font-size: var(--scale-28);
  --typography-display-l-line-height: var(--scale-40);
  --typography-display-l-letter-spacing: 0;
  --typography-display-m-font-family: var(--font-family-Display);
  --typography-display-m-font-size: var(--scale-24);
  --typography-display-m-line-height: var(--scale-38);
  --typography-display-m-letter-spacing: 0;
  --typography-display-s-font-family: var(--font-family-Display);
  --typography-display-s-font-size: var(--scale-22);
  --typography-display-s-line-height: var(--scale-36);
  --typography-display-s-letter-spacing: 0;
  --typography-headline-l-font-family: var(--font-family-Headline);
  --typography-headline-l-font-size: var(--scale-20);
  --typography-headline-l-line-height: var(--scale-34);
  --typography-headline-l-letter-spacing: 0;
  --typography-headline-m-font-family: var(--font-family-Headline);
  --typography-headline-m-font-size: var(--scale-18);
  --typography-headline-m-line-height: var(--scale-30);
  --typography-headline-m-letter-spacing: 0;
  --typography-headline-s-font-family: var(--font-family-Headline);
  --typography-headline-s-font-size: var(--scale-16);
  --typography-headline-s-line-height: var(--scale-28);
  --typography-headline-s-letter-spacing: 0;
  --typography-title-l-font-family: var(--font-family-Title);
  --typography-title-l-font-size: var(--scale-12);
  --typography-title-l-line-height: 21px;
  --typography-title-l-letter-spacing: 0;
  --typography-title-m-font-family: var(--font-family-Title);
  --typography-title-m-font-size: var(--scale-10);
  --typography-title-m-line-height: 21px;
  --typography-title-m-letter-spacing: 0;
  --typography-title-s-font-family: var(--font-family-Title);
  --typography-title-s-font-size: var(--scale-8);
  --typography-title-s-line-height: 21px;
  --typography-title-s-letter-spacing: 0;
  --typography-body-l-font-family: var(--font-family-Body);
  --typography-body-l-font-size: var(--scale-12);
  --typography-body-l-line-height: var(--scale-20);
  --typography-body-l-letter-spacing: 0;
  --typography-body-m-font-family: var(--font-family-Body);
  --typography-body-m-font-size: var(--scale-10);
  --typography-body-m-line-height: var(--scale-16);
  --typography-body-m-letter-spacing: 0;
  --typography-body-s-font-family: var(--font-family-Body);
  --typography-body-s-font-size: var(--scale-8);
  --typography-body-s-line-height: var(--scale-14);
  --typography-body-s-letter-spacing: 0;
  --typography-label-l-font-family: var(--font-family-Label);
  --typography-label-l-font-size: var(--scale-12);
  --typography-label-l-line-height: 21px;
  --typography-label-l-letter-spacing: 0;
  --typography-label-m-font-family: var(--font-family-Label);
  --typography-label-m-font-size: var(--scale-10);
  --typography-label-m-line-height: 21px;
  --typography-label-m-letter-spacing: 0;
  --typography-label-s-font-family: var(--font-family-Label);
  --typography-label-s-font-size: var(--scale-8);
  --typography-label-s-line-height: 21px;
  --typography-label-s-letter-spacing: 0;
  --typography-menu-font-family: var(--font-family-Menu);
  --typography-menu-font-size: var(--scale-12);
  --typography-menu-letter-spacing: 0;
  --typography-menu-s-font-family: var(--font-family-Menu);
  --typography-menu-s-font-size: var(--scale-8);
  --typography-menu-s-letter-spacing: 0;
  --typography-hero-font-family: var(--font-family-Display);
  --typography-hero-font-size: var(--scale-48);
  --typography-hero-letter-spacing: 0;
  --typography-hero-subtitle-font-family: var(--font-family-Display);
  --typography-hero-subtitle-font-size: var(--scale-16);
  --typography-hero-subtitle-letter-spacing: 0;

  /* Font Weights */
  --font-weight-extra-light: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;

  /* Button Properties */
  --button-v-padding: var(--scale-8);
  --button-h-padding: var(--scale-16);
  --button-full-padding: var(--scale-8);
  --button-gap: var(--scale-2);
  --button-corner-radius: var(--scale-0);
  --button-icon-size: var(--scale-18);
  --button-border: var(--scale-1);
  --button-border-focused: var(--scale-2);

  /* Badge Properties */
  --badge-v-padding-l: var(--scale-6);
  --badge-h-padding-l: var(--scale-12);
  --badge-v-padding-m: var(--scale-4);
  --badge-h-padding-m: var(--scale-10);
  --badge-v-padding-s: var(--scale-2);
  --badge-h-padding-s: var(--scale-8);
  --badge-corner-radius-s: var(--scale-0);
}

@media (min-width: 768px) {
  :root {
    --typography-display-l-font-size: var(--scale-34);
    --typography-display-l-line-height: 55px;
    --typography-display-m-font-size: var(--scale-28);
    --typography-display-m-line-height: 52px;
    --typography-display-s-font-size: var(--scale-28);
    --typography-display-s-line-height: var(--scale-44);
    --typography-headline-l-font-size: var(--scale-24);
    --typography-headline-l-line-height: var(--scale-40);
    --typography-headline-m-font-size: var(--scale-20);
    --typography-headline-s-font-size: var(--scale-18);
    --typography-title-l-font-size: var(--scale-14);
    --typography-title-l-line-height: var(--scale-24);
    --typography-title-m-font-size: var(--scale-12);
    --typography-title-m-line-height: var(--scale-24);
    --typography-title-s-font-size: var(--scale-10);
    --typography-title-s-line-height: var(--scale-22);
    --typography-body-l-font-size: var(--scale-14);
    --typography-body-l-line-height: var(--scale-22);
    --typography-body-m-font-size: var(--scale-12);
    --typography-body-m-line-height: var(--scale-20);
    --typography-body-s-font-size: var(--scale-10);
    --typography-body-s-line-height: var(--scale-18);
    --typography-label-l-font-size: var(--scale-14);
    --typography-label-l-line-height: var(--scale-24);
    --typography-label-m-font-size: var(--scale-12);
    --typography-label-m-line-height: var(--scale-24);
    --typography-label-s-font-size: var(--scale-10);
    --typography-label-s-line-height: var(--scale-18);
    --typography-menu-font-size: var(--scale-14);
    --typography-menu-s-font-size: var(--scale-12);
  }
}

@media (min-width: 992px) {
  :root {
    --typography-hero-font-size: var(--scale-64);
  }
}

@media (min-width: 1200px) {
  :root {
    --typography-display-l-font-size: var(--scale-44);
    --typography-display-m-font-size: var(--scale-36);
    --typography-display-s-font-size: var(--scale-32);
    --typography-headline-l-font-size: var(--scale-28);
    --typography-headline-m-font-size: var(--scale-22);
    --typography-headline-m-line-height: var(--scale-32);
    --typography-headline-s-font-size: var(--scale-20);
    --typography-title-l-font-size: var(--scale-16);
    --typography-title-m-font-size: var(--scale-14);
    --typography-title-s-font-size: var(--scale-12);
    --typography-body-l-font-size: var(--scale-16);
    --typography-body-m-font-size: var(--scale-14);
    --typography-body-s-font-size: var(--scale-12);
    --typography-label-l-font-size: var(--scale-16);
    --typography-label-m-font-size: var(--scale-14);
    --typography-label-s-font-size: var(--scale-12);
    --typography-menu-font-size: var(--scale-16);
    --typography-menu-s-font-size: var(--scale-13);
    --typography-hero-font-size: var(--scale-96);
  }
}

@media (min-width: 1400px) {
  :root {
    --typography-display-l-font-size: var(--scale-48);
  }
}

@media (min-width: 768px) {
  :root {
    --button-v-padding: var(--scale-10);
    --button-h-padding: var(--scale-18);
    --button-full-padding: var(--scale-10);
    --button-icon-size: var(--scale-20);
  }
}

@media (min-width: 1200px) {
  :root {
    --button-v-padding: var(--scale-12);
    --button-h-padding: var(--scale-32);
    --button-full-padding: var(--scale-12);
    --button-gap: var(--scale-4);
    --button-icon-size: var(--scale-24);
    --button-border-focused: var(--scale-3);
  }
}

@media (min-width: 768px) {
  :root {
    --badge-v-padding-l: var(--scale-8);
    --badge-h-padding-l: var(--scale-16);
    --badge-v-padding-m: var(--scale-6);
    --badge-h-padding-m: var(--scale-12);
    --badge-h-padding-s: var(--scale-10);
  }
}

@media (min-width: 1200px) {
  :root {
    --badge-v-padding-l: var(--scale-10);
    --badge-h-padding-l: var(--scale-18);
    --badge-v-padding-m: var(--scale-8);
    --badge-h-padding-m: var(--scale-14);
    --badge-v-padding-s: var(--scale-6);
    --badge-h-padding-s: var(--scale-18);
  }
}