/* Figma Styles of your File */
:root {
  /* Colors */
  /* Fonts */
  --h1-font-family: VwHead-Bold, sans-serif;
  --h1-font-size: 22px;
  --h1-line-height: 24px;
  --h1-font-weight: 700;
  --h1-font-style: normal;
  --h1-light-font-family: VwHead-Light, sans-serif;
  --h1-light-font-size: 22px;
  --h1-light-line-height: 24px;
  --h1-light-font-weight: 300;
  --h1-light-font-style: normal;
  --h2-font-family: VwHead-Bold, sans-serif;
  --h2-font-size: 20px;
  --h2-line-height: 22px;
  --h2-font-weight: 700;
  --h2-font-style: normal;
  --h3-font-family: VwHead-Bold, sans-serif;
  --h3-font-size: 20px;
  --h3-line-height: 22px;
  --h3-font-weight: 700;
  --h3-font-style: normal;
  --h3-light-font-family: VwHead-Light, sans-serif;
  --h3-light-font-size: 20px;
  --h3-light-line-height: 22px;
  --h3-light-font-weight: 300;
  --h3-light-font-style: normal;
  --h4-font-family: VwHead-Bold, sans-serif;
  --h4-font-size: 20px;
  --h4-line-height: 24px;
  --h4-font-weight: 700;
  --h4-font-style: normal;
  --h4-light-font-family: VwHead-Light, sans-serif;
  --h4-light-font-size: 20px;
  --h4-light-line-height: 24px;
  --h4-light-font-weight: 300;
  --h4-light-font-style: normal;
  --paragraph-font-family: VwText-Regular, sans-serif;
  --paragraph-font-size: 16px;
  --paragraph-line-height: 28px;
  --paragraph-font-weight: 400;
  --paragraph-font-style: normal;
  --paragraph-bold-font-family: VwText-Bold, sans-serif;
  --paragraph-bold-font-size: 16px;
  --paragraph-bold-line-height: 28px;
  --paragraph-bold-font-weight: 700;
  --paragraph-bold-font-style: normal;

  /* Effects */
}
/* Figma Color Variables of your File */
:root,
[data-primitives-mode="mode-1"] {
  /* mode-1 */
  --brand-vw-light-blue: #00b0f0;
  --grey-white: #ffffff;
  --grey-vw-light-grey: #dfe4e8;
  --grey-vw-tin-grey: #b6bfc5;
  --grey-slate: #2c2d32;
  --grey-slate-dark: #252629;
  --grey-graphite: #59595b;
  --grey-slate-94: rgba(44, 45, 50, 0.94);
  --brand-orange: #f5842f;
  --brand-red-orange: #ff3f12;
  --brand-purple: #7e3ac2;
  --brand-vw-lake-blue: #0082d6;
  --brand-gold: #c2a500;
  --brand-green: #6eb800;
  --brand-vw-dark-blue: #001e50;
  --grey-ultra-light-grey: #f2f2f2;
  --signal-vw-soft-red: #ff335c;
  --brand-darken-10-vw-light-blue-darken-10: #008abd;
  --brand-darken-10-vw-lake-blue-darken-10: #0063a3;
  --brand-darken-10-orange-darken-10: #e5680b;
  --brand-darken-10-gold-darken-10: #8f7900;
  --brand-darken-10-red-orange-darken-10: #e63910;
  --brand-darken-10-green-darken-10: #4f8500;
  --brand-darken-10-purple-darken-10: #6d32a8;
  --grey-vw-tin-grey-20: rgba(182, 191, 197, 0.2);
  --grey-graphite-50: rgba(89, 89, 91, 0.5);
  --grey-white-50: rgba(255, 255, 255, 0.5);
  --brand-ev-blue: #242e90;
  --brand-darken-10-ev-blue-darken-10: #1d2575;
  --grey-vw-tin-grey-50: rgba(182, 191, 197, 0.5);
  --grey-white-20: rgba(255, 255, 255, 0.2);
  --grey-slate-50: rgba(44, 45, 50, 0.5);
  --grey-vw-light-grey-50: rgba(223, 228, 232, 0.5);
  --brand-darken-10-vw-dark-blue-darken-10: #001436;
  --grey-black: #000000;
}

:root,
[data-tokens-mode="vw-default"] {
  /* vw-default */
  --header-primary: var(--grey-slate);
  --text-primary: var(--grey-graphite);
  --text-brand: var(--brand-vw-light-blue);
  --surface-primary: var(--grey-white);
  --surface-brand: var(--brand-vw-light-blue);
  --surface-disabled: var(--grey-vw-light-grey);
  --icon-primary: var(--grey-vw-tin-grey);
  --icon-brand: var(--brand-vw-light-blue);
  --surface-background: var(--grey-ultra-light-grey);
  --text-secondary: var(--grey-graphite-50);
  --border-buttontoggle-primary: var(--grey-vw-tin-grey);
  --border-divider-primary: var(--grey-vw-tin-grey-50);
  --border-brand: var(--brand-vw-light-blue);
  --border-buttontoggle-disabled: var(--grey-vw-light-grey);
  --icon-invert: var(--grey-white);
  --border-text-field-primary: var(--grey-vw-light-grey);
  --surface-overlay: var(--grey-slate-94);
  --surface-highlight-primary: var(--grey-vw-tin-grey-20);
  --surface-secondary: var(--grey-vw-light-grey);
  --header-secondary: var(--grey-graphite);
  --header-invert: var(--grey-white);
  --text-highlight: var(--brand-darken-10-vw-light-blue-darken-10);
  --text-invert-primary: var(--grey-white);
  --text-invert-hint-disabled: var(--grey-white-50);
  --icon-disabled: var(--grey-vw-light-grey);
  --surface-highlight-brand: var(--brand-darken-10-vw-light-blue-darken-10);
  --text-hint-disabled-primary: var(--grey-graphite-50);
  --surface-invert-background: var(--grey-slate);
  --surface-invert-primary: var(--grey-slate-dark);
  --surface-invert-secondary: var(--grey-graphite);
  --border-divider-invert-primary: var(--grey-white);
  --border-text-field-invert: var(--grey-graphite);
  --border-divider-invert-secondary: var(--grey-white-20);
  --border-divider-secondary: var(--grey-vw-tin-grey-20);
  --border-buttontoggle-invert: var(--grey-white);
  --border-highlight-brand: var(--brand-darken-10-vw-light-blue-darken-10);
  --text-hint-disabled-secondary: var(--grey-vw-light-grey);
  --border-buttontoggle-invert-disabled: var(--grey-white-50);
  --border-text-field-disabled: var(--grey-vw-light-grey-50);
  --border-text-field-invert-disabled: var(--grey-graphite-50);
  --surface-tertiary: var(--grey-vw-tin-grey);
  --header-splash-page: var(--grey-black);
  --text-splash-page: var(--grey-black);
}

[data-tokens-mode="sales-business-page"] {
  /* sales-business-page */
  --header-primary: var(--grey-slate);
  --text-primary: var(--grey-graphite);
  --text-brand: var(--brand-orange);
  --surface-primary: var(--grey-white);
  --surface-brand: var(--brand-orange);
  --surface-disabled: var(--grey-vw-light-grey);
  --icon-primary: var(--grey-vw-tin-grey);
  --icon-brand: var(--brand-orange);
  --surface-background: var(--grey-ultra-light-grey);
  --text-secondary: var(--grey-graphite-50);
  --border-buttontoggle-primary: var(--grey-vw-tin-grey);
  --border-divider-primary: var(--grey-vw-tin-grey-50);
  --border-brand: var(--brand-orange);
  --border-buttontoggle-disabled: var(--grey-vw-light-grey);
  --icon-invert: var(--grey-white);
  --border-text-field-primary: var(--grey-vw-light-grey);
  --surface-overlay: var(--grey-slate-94);
  --surface-highlight-primary: var(--grey-vw-tin-grey-20);
  --surface-secondary: var(--grey-vw-light-grey);
  --header-secondary: var(--grey-graphite);
  --header-invert: var(--grey-white);
  --text-highlight: var(--brand-darken-10-orange-darken-10);
  --text-invert-primary: var(--grey-white);
  --text-invert-hint-disabled: var(--grey-white-50);
  --icon-disabled: var(--grey-vw-light-grey);
  --surface-highlight-brand: var(--brand-darken-10-orange-darken-10);
  --text-hint-disabled-primary: var(--grey-graphite-50);
  --surface-invert-background: var(--grey-slate);
  --surface-invert-primary: var(--grey-slate-dark);
  --surface-invert-secondary: var(--grey-graphite);
  --border-divider-invert-primary: var(--grey-white);
  --border-text-field-invert: var(--grey-graphite);
  --border-divider-invert-secondary: var(--grey-white-20);
  --border-divider-secondary: var(--grey-vw-tin-grey-20);
  --border-buttontoggle-invert: var(--grey-white);
  --border-highlight-brand: var(--brand-darken-10-orange-darken-10);
  --text-hint-disabled-secondary: var(--grey-vw-light-grey);
  --border-buttontoggle-invert-disabled: var(--grey-white-50);
  --border-text-field-disabled: var(--grey-vw-light-grey-50);
  --border-text-field-invert-disabled: var(--grey-graphite-50);
  --surface-tertiary: var(--grey-vw-tin-grey);
  --header-splash-page: var(--grey-black);
  --text-splash-page: var(--grey-black);
}

[data-tokens-mode="after-sales-business-page"] {
  /* after-sales-business-page */
  --header-primary: var(--grey-slate);
  --text-primary: var(--grey-graphite);
  --text-brand: var(--brand-green);
  --surface-primary: var(--grey-white);
  --surface-brand: var(--brand-green);
  --surface-disabled: var(--grey-vw-light-grey);
  --icon-primary: var(--grey-vw-tin-grey);
  --icon-brand: var(--brand-green);
  --surface-background: var(--grey-ultra-light-grey);
  --text-secondary: var(--grey-graphite-50);
  --border-buttontoggle-primary: var(--grey-vw-tin-grey);
  --border-divider-primary: var(--grey-vw-tin-grey-50);
  --border-brand: var(--brand-green);
  --border-buttontoggle-disabled: var(--grey-vw-light-grey);
  --icon-invert: var(--grey-white);
  --border-text-field-primary: var(--grey-vw-light-grey);
  --surface-overlay: var(--grey-slate-94);
  --surface-highlight-primary: var(--grey-vw-tin-grey-20);
  --surface-secondary: var(--grey-vw-light-grey);
  --header-secondary: var(--grey-graphite);
  --header-invert: var(--grey-white);
  --text-highlight: var(--brand-darken-10-green-darken-10);
  --text-invert-primary: var(--grey-white);
  --text-invert-hint-disabled: var(--grey-white-50);
  --icon-disabled: var(--grey-vw-light-grey);
  --surface-highlight-brand: var(--brand-darken-10-green-darken-10);
  --text-hint-disabled-primary: var(--grey-graphite-50);
  --surface-invert-background: var(--grey-slate);
  --surface-invert-primary: var(--grey-slate-dark);
  --surface-invert-secondary: var(--grey-graphite);
  --border-divider-invert-primary: var(--grey-white);
  --border-text-field-invert: var(--grey-graphite);
  --border-divider-invert-secondary: var(--grey-white-20);
  --border-divider-secondary: var(--grey-vw-tin-grey-20);
  --border-buttontoggle-invert: var(--grey-white);
  --border-highlight-brand: var(--brand-darken-10-green-darken-10);
  --text-hint-disabled-secondary: var(--grey-vw-light-grey);
  --border-buttontoggle-invert-disabled: var(--grey-white-50);
  --border-text-field-disabled: var(--grey-vw-light-grey-50);
  --border-text-field-invert-disabled: var(--grey-graphite-50);
  --surface-tertiary: var(--grey-vw-tin-grey);
  --header-splash-page: var(--grey-black);
  --text-splash-page: var(--grey-black);
}