:root {
  /* === Reference Tokens === */
  /* #region */

  /* font */
  /* #region */

  --ref-font-family-primary: 'Open Sans', verdana, geneva, sans-serif;
  --ref-font-family-symbol: symbolfont, sans-serif;

  --ref-font-size-title-xxl: 2.5rem;
  --ref-line-height-title-xxl: 1.25;
  --ref-font-size-subtitle-xxl: 2rem;
  --ref-line-height-subtitle-xxl: 1.25;
  --ref-font-size-title-xl: 2rem;
  --ref-line-height-title-xl: 1.25;
  --ref-font-size-subtitle-xl: 1.5rem;
  --ref-line-height-subtitle-xl: 1.25;
  --ref-font-size-title-lg: 1.5rem;
  --ref-line-height-title-lg: 1.25;
  --ref-font-size-subtitle-lg: 1.25rem;
  --ref-line-height-subtitle-lg: 1.5;
  --ref-font-size-title-md: 1.25rem;
  --ref-line-height-title-md: 1.25;
  --ref-font-size-subtitle-md: 1.125rem;
  --ref-line-height-subtitle-md: 1.2222;
  --ref-font-size-title-sm: 1.125rem;
  --ref-line-height-title-sm: 1.25;
  --ref-font-size-subtitle-sm: 1rem;
  --ref-line-height-subtitle-sm: 1.25;
  --ref-font-size-body: 1rem;
  --ref-line-height-body: 1.5;
  --ref-font-size-small: 0.875rem;
  --ref-line-height-small: 1.5;
  --ref-font-size-caption: 0.75rem;
  --ref-line-height-caption: 1.5;
  --ref-font-size-superscript: 0.5rem;
  --ref-line-height-superscript: 1.5;

  --ref-font-weight-extraBold: 800;
  --ref-font-weight-bold: 700;
  --ref-font-weight-medium: 600;
  --ref-font-weight-regular: 400;

  /* #endregion */

  /* icons */
  /* #region */
  --ref-glyph-play-circle: '\23f5';
  --ref-glyph-phone-app: '\1f4f2';
  --ref-glyph-weddings: '\e900';
  --ref-glyph-logo: '\76';
  --ref-glyph-brand: '\56';
  --ref-glyph-logo-cta: '\3e';
  --ref-glyph-search: '\2315';
  --ref-glyph-star: '\2605';
  --ref-glyph-star-half: '\2729';
  --ref-glyph-bed: '\2124';
  --ref-glyph-yes: '\2713';
  --ref-glyph-no: '\2715';
  --ref-glyph-yes-em: '\2714';
  --ref-glyph-no-em: '\2716';
  --ref-glyph-deal: '\27b3';
  --ref-glyph-fenced: '\27bd';
  --ref-glyph-mark: '\2352';
  --ref-glyph-left: '\2190';
  --ref-glyph-up: '\2191';
  --ref-glyph-right: '\2192';
  --ref-glyph-down: '\2193';
  --ref-glyph-left-em: '\25c0';
  --ref-glyph-up-em: '\25b2';
  --ref-glyph-right-em: '\25b6';
  --ref-glyph-down-em: '\25bc';
  --ref-glyph-chat: '\270d';
  --ref-glyph-mail: '\2709';
  --ref-glyph-my-account: '\270c';
  --ref-glyph-phone: '\2706';
  --ref-glyph-people: '\263b';
  --ref-glyph-nav: '\2261';
  --ref-glyph-home: '\2302';
  --ref-glyph-dropdown: '\21b2';
  --ref-glyph-suitcase: '\2318';
  --ref-glyph-hotel: '\25a4';
  --ref-glyph-tour: '\2601';
  --ref-glyph-club: '\263e';
  --ref-glyph-air: '\2708';
  --ref-glyph-event: '\2604';
  --ref-glyph-like: '\2764';
  --ref-glyph-dislike: '\2620';
  --ref-glyph-zoom-in: '\2295';
  --ref-glyph-zoom-out: '\2296';
  --ref-glyph-bullet: '\2022';
  --ref-glyph-blank: '\2001';
  --ref-glyph-dollar: '\0024';
  --ref-glyph-lock: '\232e';
  --ref-glyph-lock-2: '\e600';
  --ref-glyph-mic: '\e91e';
  --ref-glyph-facebook-em: '\ff46';
  --ref-glyph-facebook: '\24d5';
  --ref-glyph-twitter: '\24e3';
  --ref-glyph-pinterest: '\24df';
  --ref-glyph-google-plus: '\24d6';
  --ref-glyph-instagram: '\24d8';
  --ref-glyph-calendar: '\25A6';
  --ref-glyph-plus: '\002B';
  --ref-glyph-minus: '\2212';
  --ref-glyph-key: '\2767';
  --ref-glyph-clock: '\231A';
  --ref-glyph-print: '\229F';
  --ref-glyph-eat: '\229a';
  --ref-glyph-attraction: '\e601';
  --ref-glyph-cart: '\2584';
  --ref-glyph-hearts: '\2665';
  --ref-glyph-more: '\2026';
  --ref-glyph-in: '\2348';
  --ref-glyph-out: '\2347';
  --ref-glyph-question: '\003f';
  --ref-glyph-brand-lock: '\1f512';
  --ref-glyph-female: '\2640';
  --ref-glyph-male: '\2642';
  --ref-glyph-filter: '\1f50d';
  --ref-glyph-info: '\e906';
  --ref-glyph-heart-on: '\1f49c';
  --ref-glyph-heart-off: '\1f49f';
  --ref-glyph-shower: '\244a';
  --ref-glyph-heart-clear: '\01F49F';
  --ref-glyph-moon: '\263D';
  --ref-glyph-tickets: '\2604';
  --ref-glyph-drink: '\263e';
  --ref-glyph-plane: '\2708';
  --ref-glyph-ferris-wheel: '\e601';
  --ref-glyph-helicopter: '\2601';
  /* #endregion */

  /* border-radius */
  /* #region */
  --ref-border-radius-None: 0;
  --ref-border-radius-2XS: 0.125rem; /* 2px */
  --ref-border-radius-XS: 0.25rem; /* 4px */
  --ref-border-radius-SM: 0.5rem; /* 8px */
  --ref-border-radius-MD: 0.75rem; /* 12px */
  --ref-border-radius-LG: 1rem; /* 16px */
  --ref-border-radius-XL: 1.25rem; /* 20px */
  --ref-border-radius-Round: 1000px;
  /* #endregion */

  /* spacing */
  /* #region */
  --ref-spacing-None: 0;
  --ref-spacing-3XS: 0.0625rem; /* 1px */
  --ref-spacing-2XS: 0.125rem; /* 2px */
  --ref-spacing-XS: 0.25rem; /* 4px */
  --ref-spacing-SM: 0.5rem; /* 8px */
  --ref-spacing-MD: 0.75rem; /* 12px */
  --ref-spacing-LG: 1rem; /* 16px */
  --ref-spacing-XL: 1.25rem; /* 20px */
  --ref-spacing-2XL: 1.5rem; /* 24px */
  --ref-spacing-3XL: 2rem; /* 32px */
  --ref-spacing-4XL: 2.5rem; /* 40px */
  --ref-spacing-5XL: 3rem; /* 48px */
  --ref-spacing-6XL: 3.5rem; /* 56px */
  --ref-spacing-7XL: 4rem; /* 64px */
  --ref-spacing-8XL: 4.5rem; /* 72px */
  --ref-spacing-9XL: 5rem; /* 80px */
  /* #endregion */

  --ref-z-index-default: 1;
  --ref-z-index-sticky: 200;
  --ref-z-index-header: 300;
  --ref-z-index-toast: 400;
  --ref-z-index-dropdown: 500;
  --ref-z-index-overlay: 600;
  --ref-z-index-spinner: 700;
  --ref-z-index-modal: 800;
  --ref-z-index-popover: 900;

  /* ref-colors */
  /* #region */

  --ref-color-primary-brand-50: rgb(254 248 233 / 100%);
  --ref-color-primary-brand-100: rgb(254 241 211 / 100%);
  --ref-color-primary-brand-200: rgb(253 226 166 / 100%);
  --ref-color-primary-brand-300: rgb(252 212 122 / 100%);
  --ref-color-primary-brand-400: rgb(251 197 77 / 100%);
  --ref-color-primary-brand-500: rgb(250 183 33 / 100%);
  --ref-color-primary-brand-600: rgb(200 146 26 / 100%);
  --ref-color-primary-brand-700: rgb(150 110 20 / 100%);
  --ref-color-primary-brand-800: rgb(100 73 13 / 100%);
  --ref-color-primary-brand-900: rgb(50 37 7 / 100%);
  --ref-color-primary-brand-500-transparent50: rgb(250 183 33 / 50%);
  --ref-color-primary-brand-500-transparent12: rgb(250 183 33 / 12%);

  --ref-color-secondary-50: rgb(232 239 250 / 100%);
  --ref-color-secondary-100: rgb(209 224 246 / 100%);
  --ref-color-secondary-200: rgb(164 193 237 / 100%);
  --ref-color-secondary-300: rgb(118 162 228 / 100%);
  --ref-color-secondary-400: rgb(73 131 219 / 100%);
  --ref-color-secondary-500: rgb(27 100 210 / 100%);
  --ref-color-secondary-600: rgb(22 80 168 / 100%);
  --ref-color-secondary-700: rgb(16 60 126 / 100%);
  --ref-color-secondary-800: rgb(11 40 84 / 100%);
  --ref-color-secondary-900: rgb(5 20 42 / 100%);
  --ref-color-secondary-500-transparent50: rgb(27 100 210 / 50%);

  --ref-color-neutral-white: rgb(255 255 255 / 100%);
  --ref-color-neutral-white-transparent12: rgb(255 255 255 / 12%);
  --ref-color-neutral-white-transparent38: rgb(255 255 255 / 38%);
  --ref-color-neutral-white-transparent50: rgb(255 255 255 / 50%);

  --ref-color-neutral-black: rgb(0 0 0 / 100%);
  --ref-color-neutral-black-transparent12: rgb(0 0 0 / 12%);
  --ref-color-neutral-black-transparent38: rgb(0 0 0 / 38%);
  --ref-color-neutral-black-transparent50: rgb(0 0 0 / 50%);

  --ref-color-neutral-gray-100: rgb(250 250 250 / 100%);
  --ref-color-neutral-gray-200: rgb(245 245 245 / 100%);
  --ref-color-neutral-gray-300: rgb(222 222 222 / 100%);
  --ref-color-neutral-gray-400: rgb(165 165 165 / 100%);
  --ref-color-neutral-gray-500: rgb(137 137 137 / 100%);
  --ref-color-neutral-gray-600: rgb(112 112 112 / 100%);
  --ref-color-neutral-gray-700: rgb(66 66 66 / 100%);
  --ref-color-neutral-gray-800: rgb(51 51 51 / 100%);
  --ref-color-neutral-gray-900: rgb(39 39 39 / 100%);
  --ref-color-neutral-gray-500-transparent50: rgb(137 137 137 / 50%);

  --ref-color-neutral-hangover-50: rgb(234 234 238 / 100%);
  --ref-color-neutral-hangover-100: rgb(223 223 226 / 100%);
  --ref-color-neutral-hangover-200: rgb(191 192 198 / 100%);
  --ref-color-neutral-hangover-300: rgb(163 164 173 / 100%);
  --ref-color-neutral-hangover-400: rgb(135 136 147 / 100%);
  --ref-color-neutral-hangover-500: rgb(107 108 122 / 100%);
  --ref-color-neutral-hangover-600: rgb(82 82 93 / 100%);
  --ref-color-neutral-hangover-700: rgb(56 57 64 / 100%);
  --ref-color-neutral-hangover-800: rgb(31 31 35 / 100%);
  --ref-color-neutral-hangover-900: rgb(5 5 6 / 100%);
  --ref-color-neutral-hangover-500-transparent50: rgb(107 108 122 / 50%);

  --ref-color-blue-50: rgb(232 239 250 / 100%);
  --ref-color-blue-100: rgb(209 224 246 / 100%);
  --ref-color-blue-200: rgb(164 193 237 / 100%);
  --ref-color-blue-300: rgb(118 162 228 / 100%);
  --ref-color-blue-400: rgb(73 131 219 / 100%);
  --ref-color-blue-500: rgb(27 100 210 / 100%);
  --ref-color-blue-600: rgb(22 80 168 / 100%);
  --ref-color-blue-700: rgb(16 60 126 / 100%);
  --ref-color-blue-800: rgb(11 40 84 / 100%);
  --ref-color-blue-900: rgb(5 20 42 / 100%);
  --ref-color-blue-500-transparent50: rgb(27 100 210 / 50%);

  --ref-color-orange-50: rgb(254 243 233 / 100%);
  --ref-color-orange-100: rgb(253 231 211 / 100%);
  --ref-color-orange-200: rgb(251 207 166 / 100%);
  --ref-color-orange-300: rgb(248 183 122 / 100%);
  --ref-color-orange-400: rgb(246 159 77 / 100%);
  --ref-color-orange-500: rgb(244 135 33 / 100%);
  --ref-color-orange-600: rgb(195 108 26 / 100%);
  --ref-color-orange-700: rgb(146 81 20 / 100%);
  --ref-color-orange-800: rgb(98 54 13 / 100%);
  --ref-color-orange-900: rgb(49 27 7 / 100%);
  --ref-color-orange-500-transparent50: rgb(244 135 33 / 50%);

  --ref-color-red-50: rgb(250 235 236 / 100%);
  --ref-color-red-100: rgb(245 215 218 / 100%);
  --ref-color-red-200: rgb(235 176 180 / 100%);
  --ref-color-red-300: rgb(224 136 143 / 100%);
  --ref-color-red-400: rgb(214 97 105 / 100%);
  --ref-color-red-500: rgb(204 57 68 / 100%);
  --ref-color-red-600: rgb(163 46 54 / 100%);
  --ref-color-red-700: rgb(122 34 41 / 100%);
  --ref-color-red-800: rgb(82 23 27 / 100%);
  --ref-color-red-900: rgb(41 11 14 / 100%);
  --ref-color-red-500-transparent50: rgb(204 57 68 / 50%);

  --ref-color-green-50: rgb(240 249 239 / 100%);
  --ref-color-green-100: rgb(226 242 223 / 100%);
  --ref-color-green-200: rgb(196 229 191 / 100%);
  --ref-color-green-300: rgb(167 217 160 / 100%);
  --ref-color-green-400: rgb(137 204 128 / 100%);
  --ref-color-green-500: rgb(108 191 96 / 100%);
  --ref-color-green-600: rgb(86 153 77 / 100%);
  --ref-color-green-700: rgb(65 115 58 / 100%);
  --ref-color-green-800: rgb(43 76 38 / 100%);
  --ref-color-green-900: rgb(22 38 19 / 100%);
  --ref-color-green-500-transparent50: rgb(108 191 96 / 50%);

  --ref-color-oasis-50: rgb(231 243 241 / 100%);
  --ref-color-oasis-100: rgb(207 231 226 / 100%);
  --ref-color-oasis-200: rgb(160 207 198 / 100%);
  --ref-color-oasis-300: rgb(112 184 169 / 100%);
  --ref-color-oasis-400: rgb(65 160 141 / 100%);
  --ref-color-oasis-500: rgb(17 136 112 / 100%);
  --ref-color-oasis-600: rgb(14 109 90 / 100%);
  --ref-color-oasis-700: rgb(10 82 67 / 100%);
  --ref-color-oasis-800: rgb(7 54 45 / 100%);
  --ref-color-oasis-900: rgb(3 27 22 / 100%);
  --ref-color-oasis-500-transparent50: rgb(17 136 112 / 50%);

  --ref-color-purple-50: rgb(243 239 244 / 100%);
  --ref-color-purple-100: rgb(231 223 233 / 100%);
  --ref-color-purple-200: rgb(208 191 212 / 100%);
  --ref-color-purple-300: rgb(184 158 190 / 100%);
  --ref-color-purple-400: rgb(161 126 169 / 100%);
  --ref-color-purple-500: rgb(137 94 147 / 100%);
  --ref-color-purple-600: rgb(110 75 118 / 100%);
  --ref-color-purple-700: rgb(82 56 88 / 100%);
  --ref-color-purple-800: rgb(55 38 59 / 100%);
  --ref-color-purple-900: rgb(27 19 29 / 100%);
  --ref-color-purple-500-transparent50: rgb(137 94 147 / 50%);

  /* Not in new designs yet */
  --ref-color-others-DragQueen: rgb(234 38 144 / 100%);
  --ref-color-others-BananaHammock: rgb(242 234 36 / 100%);
  --ref-color-others-Mirage: rgb(40 167 223 / 100%);
  --ref-color-others-SprayTan-50: rgb(255 255 230 / 100%);
  --ref-color-others-SprayTan-100: rgb(255 248 184 / 100%);
  --ref-color-others-SprayTan-200: rgb(255 235 138 / 100%);
  --ref-color-others-SprayTan-300: rgb(255 217 96 / 100%);
  --ref-color-others-SprayTan-400: rgb(243 194 67 / 100%);
  --ref-color-others-SprayTan-500: rgb(222 168 43 / 100%);
  --ref-color-others-SprayTan-600: rgb(196 139 17 / 100%);
  --ref-color-others-SprayTan-700: rgb(153 106 0 / 100%);
  --ref-color-others-SprayTan-800: rgb(102 72 0 / 100%);
  --ref-color-others-SprayTan-900: rgb(51 36 0 / 100%);
  --ref-color-others-Bundle: rgb(117 86 213 / 100%);
  --ref-color-others-BundleBackground: rgb(241 238 251 / 100%);

  /* #endregion */

  /* #endregion */

  /* === System Tokens === */
  /* #region */

  /* background */
  /* #region */

  --sys-color-background-base-default: var(--ref-color-neutral-gray-100);
  --sys-color-background-scrim: var(--ref-color-neutral-black-transparent38);

  --sys-color-background-inverse: var(--ref-color-neutral-hangover-900);
  --sys-color-background-inverse-subtle: var(--ref-color-neutral-gray-900);
  --sys-color-background-inverse-extra-subtle: var(
    --ref-color-neutral-gray-800
  );
  --sys-color-background-inverse-super-subtle: var(
    --ref-color-neutral-hangover-500
  );
  --sys-color-background-inverse-surface: var(
    --ref-color-neutral-black-transparent50
  );
  --sys-color-background-surface: var(--ref-color-neutral-white);
  --sys-color-background-surface-subtle: var(--ref-color-neutral-gray-100);
  --sys-color-background-surface-extra-subtle: var(
    --ref-color-neutral-gray-200
  );
  --sys-color-background-surface-varient: var(--ref-color-secondary-50);
  --sys-color-background-surface-hovered: var(--ref-color-secondary-50);

  --sys-color-background-primary: var(--ref-color-primary-brand-500);
  --sys-color-background-primary-bolder: var(--ref-color-primary-brand-700);
  --sys-color-background-primary-fill: var(--ref-color-primary-brand-500);
  --sys-color-background-primary-fill-hovered: var(
    --ref-color-primary-brand-600
  );
  --sys-color-background-primary-fill-pressed: var(
    --ref-color-primary-brand-700
  );
  --sys-color-background-primary-tonal: var(--ref-color-primary-brand-50);
  --sys-color-background-primary-tonal-hovered: var(
    --ref-color-primary-brand-100
  );
  --sys-color-background-primary-tonal-pressed: var(
    --ref-color-primary-brand-200
  );
  --sys-color-background-primary-hovered: var(--ref-color-primary-brand-50);
  --sys-color-background-primary-pressed: var(--ref-color-primary-brand-100);

  --sys-color-background-secondary: var(--ref-color-secondary-500);
  --sys-color-background-secondary-bold: var(--ref-color-secondary-600);
  --sys-color-background-secondary-bolder: var(--ref-color-secondary-700);
  --sys-color-background-secondary-fill: var(--ref-color-secondary-500);
  --sys-color-background-secondary-fill-hovered: var(--ref-color-secondary-600);
  --sys-color-background-secondary-fill-pressed: var(--ref-color-secondary-700);
  --sys-color-background-secondary-tonal: var(--ref-color-secondary-50);
  --sys-color-background-secondary-tonal-hovered: var(
    --ref-color-secondary-100
  );
  --sys-color-background-secondary-tonal-pressed: var(
    --ref-color-secondary-200
  );
  --sys-color-background-secondary-hovered: var(--ref-color-secondary-50);
  --sys-color-background-secondary-pressed: var(--ref-color-secondary-100);

  --sys-color-background-neutral-fill: var(--ref-color-neutral-hangover-700);
  --sys-color-background-neutral-fill-hovered: var(
    --ref-color-neutral-hangover-800
  );
  --sys-color-background-neutral-fill-pressed: var(
    --ref-color-neutral-hangover-900
  );
  --sys-color-background-neutral-tonal: var(--ref-color-neutral-hangover-50);
  --sys-color-background-neutral-tonal-hovered: var(
    --ref-color-neutral-hangover-100
  );
  --sys-color-background-neutral-tonal-pressed: var(
    --ref-color-neutral-hangover-200
  );
  --sys-color-background-neutral-hovered: var(--ref-color-neutral-hangover-50);
  --sys-color-background-neutral-pressed: var(--ref-color-neutral-hangover-100);
  --sys-color-background-neutral-bolder: var(--ref-color-neutral-hangover-900);

  --sys-color-background-neutral-subtle-fill: var(--ref-color-neutral-gray-500);
  --sys-color-background-neutral-subtle-fill-hovered: var(
    --ref-color-neutral-gray-600
  );
  --sys-color-background-neutral-subtle-fill-pressed: var(
    --ref-color-neutral-gray-700
  );
  --sys-color-background-neutral-subtle-tonal: var(
    --ref-color-neutral-gray-100
  );
  --sys-color-background-neutral-subtle-tonal-hovered: var(
    --ref-color-neutral-gray-200
  );
  --sys-color-background-neutral-subtle-tonal-pressed: var(
    --ref-color-neutral-gray-300
  );
  --sys-color-background-neutral-subtle-hovered: var(
    --ref-color-neutral-gray-100
  );
  --sys-color-background-neutral-subtle-pressed: var(
    --ref-color-neutral-gray-200
  );
  --sys-color-background-neutral-subtle-bolder: var(
    --ref-color-neutral-gray-900
  );

  --sys-color-background-neutral-inverse-fill: var(--ref-color-neutral-white);
  --sys-color-background-neutral-inverse-fill-hovered: var(
    --ref-color-neutral-gray-100
  );
  --sys-color-background-neutral-inverse-fill-pressed: var(
    --ref-color-neutral-gray-200
  );
  --sys-color-background-neutral-inverse-tonal: var(
    --ref-color-neutral-gray-300
  );
  --sys-color-background-neutral-inverse-tonal-hovered: var(
    --ref-color-neutral-gray-400
  );
  --sys-color-background-neutral-inverse-tonal-pressed: var(
    --ref-color-neutral-gray-500
  );
  --sys-color-background-neutral-inverse-hovered: var(
    --ref-color-neutral-white-transparent12
  );
  --sys-color-background-neutral-inverse-pressed: var(
    --ref-color-neutral-white-transparent38
  );
  --sys-color-background-neutral-inverse-bolder: var(
    --ref-color-neutral-gray-500
  );

  --sys-color-background-info-fill: var(--ref-color-secondary-500);
  --sys-color-background-info-fill-hovered: var(--ref-color-secondary-600);
  --sys-color-background-info-fill-pressed: var(--ref-color-secondary-700);
  --sys-color-background-info-tonal: var(--ref-color-secondary-50);
  --sys-color-background-info-tonal-hovered: var(--ref-color-secondary-100);
  --sys-color-background-info-tonal-pressed: var(--ref-color-secondary-200);
  --sys-color-background-info-hovered: var(--ref-color-secondary-50);
  --sys-color-background-info-pressed: var(--ref-color-secondary-100);
  --sys-color-background-info-bolder: var(--ref-color-secondary-700);

  --sys-color-background-success-fill: var(--ref-color-green-500);
  --sys-color-background-success-fill-hovered: var(--ref-color-green-600);
  --sys-color-background-success-fill-pressed: var(--ref-color-green-700);
  --sys-color-background-success-tonal: var(--ref-color-green-50);
  --sys-color-background-success-tonal-hovered: var(--ref-color-green-100);
  --sys-color-background-success-tonal-pressed: var(--ref-color-green-200);
  --sys-color-background-success-hovered: var(--ref-color-green-50);
  --sys-color-background-success-pressed: var(--ref-color-green-100);
  --sys-color-background-success-bolder: var(--ref-color-green-700);

  --sys-color-background-urgency-fill: var(--ref-color-red-500);
  --sys-color-background-urgency-fill-hovered: var(--ref-color-red-600);
  --sys-color-background-urgency-fill-pressed: var(--ref-color-red-700);
  --sys-color-background-urgency-tonal: var(--ref-color-red-50);
  --sys-color-background-urgency-tonal-hovered: var(--ref-color-red-100);
  --sys-color-background-urgency-tonal-pressed: var(--ref-color-red-200);
  --sys-color-background-urgency-bolder: var(--ref-color-red-700);
  --sys-color-background-urgency-hovered: var(--ref-color-red-50);
  --sys-color-background-urgency-pressed: var(--ref-color-red-100);

  --sys-color-background-warning-fill: var(--ref-color-orange-500);
  --sys-color-background-warning-fill-hovered: var(--ref-color-orange-600);
  --sys-color-background-warning-fill-pressed: var(--ref-color-orange-700);
  --sys-color-background-warning-tonal: var(--ref-color-orange-50);
  --sys-color-background-warning-tonal-hovered: var(--ref-color-orange-100);
  --sys-color-background-warning-tonal-pressed: var(--ref-color-orange-200);
  --sys-color-background-warning-hovered: var(--ref-color-orange-50);
  --sys-color-background-warning-pressed: var(--ref-color-orange-100);
  --sys-color-background-warning-bolder: var(--ref-color-orange-700);

  --sys-color-background-deal-fill: var(--ref-color-oasis-500);
  --sys-color-background-deal-fill-hovered: var(--ref-color-oasis-600);
  --sys-color-background-deal-fill-pressed: var(--ref-color-oasis-700);
  --sys-color-background-deal-tonal: var(--ref-color-oasis-50);
  --sys-color-background-deal-tonal-hovered: var(--ref-color-oasis-100);
  --sys-color-background-deal-tonal-pressed: var(--ref-color-oasis-200);
  --sys-color-background-deal-hovered: var(--ref-color-oasis-50);
  --sys-color-background-deal-pressed: var(--ref-color-oasis-100);
  --sys-color-background-deal-bolder: var(--ref-color-oasis-700);

  --sys-color-background-bundle-fill: var(--ref-color-others-BundleBackground);
  --sys-color-bundle: var(--ref-color-others-Bundle);

  --sys-color-background-disable-fill: var(--ref-color-neutral-gray-200);
  --sys-color-background-loading-fill: var(--ref-color-neutral-gray-200);

  /* #endregion */

  /* border */
  /* #region */

  --sys-color-border-surface: var(--ref-color-neutral-hangover-100);
  --sys-color-border-surface-subtle: var(--ref-color-neutral-gray-200);

  --sys-color-border-inverse: var(--ref-color-neutral-gray-800);
  --sys-color-border-inverse-transparent38: var(--ref-color-neutral-black-transparent38);
  --sys-color-border-primary: var(--ref-color-primary-brand-500-transparent50);
  --sys-color-border-secondary: var(--ref-color-secondary-500-transparent50);
  --sys-color-border-neutral: var(
    --ref-color-neutral-hangover-500-transparent50
  );
  --sys-color-border-neutral-subtle: var(
    --ref-color-neutral-gray-500-transparent50
  );
  --sys-color-border-neutral-inverse: var(
    --ref-color-neutral-white-transparent50
  );
  
  --sys-color-border-info: var(--ref-color-secondary-500-transparent50);
  --sys-color-border-success: var(--ref-color-green-500-transparent50);
  --sys-color-border-urgency: var(--ref-color-red-500-transparent50);
  --sys-color-border-error: var(--ref-color-red-500-transparent50);
  --sys-color-border-warning: var(--ref-color-orange-500-transparent50);
  --sys-color-border-green: var(--ref-color-oasis-500-transparent50);

  --sys-color-border-disable: var(--ref-color-neutral-black-transparent12);
  --sys-color-border-loading: var(--ref-color-neutral-black-transparent12);

  /* #endregion */

  /* content */
  /* #region */

  --sys-color-content-default: var(--ref-color-neutral-black);
  --sys-color-content-default-subtle: var(--ref-color-neutral-gray-800);
  --sys-color-content-default-subtler: var(--ref-color-neutral-gray-600);
  --sys-color-content-default-subtlest: var(--ref-color-neutral-gray-400);
  --sys-color-content-default-inverse-subtler: var(
    --ref-color-neutral-hangover-200
  );
  --sys-color-content-default-inverse-subtle: var(
    --ref-color-neutral-hangover-100
  );
  --sys-color-content-default-inverse: var(--ref-color-neutral-white);
  --sys-color-content-primary: var(--ref-color-primary-brand-500);
  --sys-color-content-primary-sublest: var(--ref-color-primary-brand-100);
  --sys-color-content-secondary: var(--ref-color-secondary-500);
  --sys-color-content-secondary-bold: var(--ref-color-secondary-700);
  --sys-color-content-link: var(--ref-color-secondary-500);
  --sys-color-content-link-subtle: var(--ref-color-secondary-100);
  --sys-color-content-icon-default: var(--ref-color-neutral-gray-500);
  --sys-color-content-icon-hover: var(--ref-color-secondary-500);
  --sys-color-content-neutral: var(--ref-color-neutral-hangover-700);
  --sys-color-content-neutral-subtle: var(--ref-color-neutral-gray-500);
  --sys-color-content-disable: var(--ref-color-neutral-gray-400);
  --sys-color-content-loading: var(--ref-color-neutral-gray-400);
  --sys-color-content-info: var(--ref-color-secondary-500);
  --sys-color-content-urgency: var(--ref-color-red-500);
  --sys-color-content-error: var(--ref-color-red-500);
  --sys-color-content-warning: var(--ref-color-orange-500);
  --sys-color-content-success: var(--ref-color-green-500);
  --sys-color-content-nature: var(--ref-color-oasis-500);
  --sys-color-content-deal: var(--ref-color-oasis-500);

  /* #endregion */

  /* #endregion */

  /* === Component Tokens === */
  /* #region */

  /* input */
  /* #region */

  --comp-color-input-bg-surface: var(--ref-color-neutral-white);
  --comp-color-input-bg-hovered: var(--ref-color-secondary-50);
  --comp-color-input-bg-disable: var(--sys-color-background-disable-fill);

  --comp-color-input-border: var(--sys-color-border-surface);
  --comp-color-input-border-error: var(--sys-color-border-error);
  --comp-color-input-border-focus: var(--sys-color-border-primary);
  --comp-color-input-border-disable: var(--sys-color-border-disable);

  --comp-color-input-content: var(--sys-color-content-default-subtler);
  --comp-color-input-content-icon: var(--sys-color-content-default-subtlest);
  --comp-color-input-content-state: var(--sys-color-content-default-subtle);
  --comp-color-input-content-error: var(--sys-color-content-error);
  --comp-color-input-content-disable: var(--sys-color-content-disable);

  /* #endregion */

  /* header */
  /* #region */

  --comp-color-header-background-top: var(--sys-color-background-inverse);

  --comp-color-header-background-main: var(
    --sys-color-background-inverse-subtle
  );
  --comp-color-header-background-variant: var(--sys-color-background-inverse);
  --comp-color-header-nav-item-content: var(
    --sys-color-content-default-inverse
  );
  --comp-color-header-nav-item-content-inverse: var(
    --sys-color-content-default-subtle
  );
  --comp-color-header-nav-item-content-hover: var(--sys-color-content-primary);
  --comp-color-header-nav-item-bg-hover: var(
    --ref-color-primary-brand-500-transparent12
  );
  --comp-color-header-dropdown-bg: var(--sys-color-background-surface);
  --comp-color-header-dropdown-bg-variant: var(
    --sys-color-background-inverse-subtle
  );
  --comp-color-header-divider: var(--ref-color-neutral-gray-800);
  --comp-color-header-border: var(--ref-color-neutral-gray-800);

  /* #endregion */

  /* #endregion */

  /* defaults */
  background-color: var(--sys-color-background-base-default);
  color: var(--sys-color-content-default);
  color-scheme: light;
  --tw-interactive-bg-mix: var(--sys-color-content-default);
}

/* more defaults */
*,
::before,
::after {
  border-color: var(--sys-color-border-surface);
}