:root {
  /* colors / brand */
  --color-brand_highlight-rgb: 181, 31, 31;
  --color-brand_highlight: rgb(var(--color-brand_highlight-rgb));

  --color-brand_dark-rgb: 85, 27, 27;
  --color-brand_dark: rgb(var(--color-brand_dark-rgb));

  --color-brand_light-rgb: 243, 207, 179;
  --color-brand_light: rgb(var(--color-brand_light-rgb));

  --color-brand_base-rgb: var(--color-white-rgb);
  --color-brand_base: rgb(var(--color-brand_base-rgb));

  /* colors / ux */
  --color-ux_good-rgb: 51, 122, 93;
  --color-ux_good: rgb(var(--color-ux_good-rgb));

  --color-ux_good_contrast-rgb: var(--color-white-rgb);
  --color-ux_good_contrast: rgb(var(--color-ux_good_contrast-rgb));

  --color-ux_info-rgb: 48, 116, 159;
  --color-ux_info: rgb(var(--color-ux_info-rgb));

  --color-ux_info_contrast-rgb: var(--color-white-rgb);
  --color-ux_info_contrast: rgb(var(--color-ux_info_contrast-rgb));

  --color-ux_error-rgb: 209, 19, 19;
  --color-ux_error: rgb(var(--color-ux_error-rgb));

  --color-ux_error_contrast-rgb: var(--color-white-rgb);
  --color-ux_error_contrast: rgb(var(--color-ux_error_contrast-rgb));

  --color-ux_warn-rgb: 235, 217, 82;
  --color-ux_warn: rgb(var(--color-ux_warn-rgb));

  --color-ux_warn_contrast-rgb: var(--color-brand_dark-rgb);
  --color-ux_warn_contrast: rgb(var(--color-ux_warn_contrast-rgb));

  /* colors / ux / backgrounds */
  --color-ux_backgrounds_light10-rgb: 254, 250, 247;
  --color-ux_backgrounds_light10: rgb(var(--color-ux_backgrounds_light10-rgb));

  --color-ux_backgrounds_light40-rgb: 250, 236, 225;
  --color-ux_backgrounds_light40: rgb(var(--color-ux_backgrounds_light40-rgb));

  --color-ux_backgrounds_light70-rgb: 247, 221, 202;
  --color-ux_backgrounds_light70: rgb(var(--color-ux_backgrounds_light70-rgb));

  --color-ux_backgrounds_grey_light-rgb: 243, 241, 241;
  --color-ux_backgrounds_grey_light: rgb(var(--color-ux_backgrounds_grey_light-rgb));

  --color-ux_backgrounds_grey_mid-rgb: 204, 196, 196;
  --color-ux_backgrounds_grey_mid: rgb(var(--color-ux_backgrounds_grey_mid-rgb));

  --color-ux_backgrounds_grey_dark-rgb: 121, 103, 103;
  --color-ux_backgrounds_grey_dark: rgb(var(--color-ux_backgrounds_grey_dark-rgb));

  /* colors / ux / piste */
  --color-ux_piste_beginner-rgb: var(--color-ux_good-rgb);
  --color-ux_piste_beginner: rgb(var(--color-ux_piste_beginner-rgb));

  --color-ux_piste_beginner_contrast-rgb: var(--color-ux_good_contrast-rgb);
  --color-ux_piste_beginner_contrast: rgb(var(--color-ux_piste_beginner_contrast-rgb));

  --color-ux_piste_easy-rgb: var(--color-ux_info-rgb);
  --color-ux_piste_easy: rgb(var(--color-ux_piste_easy-rgb));

  --color-ux_piste_easy_contrast-rgb: var(--color-ux_info_contrast-rgb);
  --color-ux_piste_easy_contrast: rgb(var(--color-ux_piste_easy_contrast-rgb));

  --color-ux_piste_intermediate-rgb: var(--color-ux_error-rgb);
  --color-ux_piste_intermediate: rgb(var(--color-ux_piste_intermediate-rgb));

  --color-ux_piste_intermediate_contrast-rgb: var(--color-ux_error_contrast-rgb);
  --color-ux_piste_intermediate_contrast: rgb(var(--color-ux_piste_intermediate_contrast-rgb));

  --color-ux_piste_expert-rgb: 31, 10, 10;
  --color-ux_piste_expert: rgb(var(--color-ux_piste_expert-rgb));

  --color-ux_piste_expert_contrast-rgb: var(--color-white-rgb);
  --color-ux_piste_expert_contrast: rgb(var(--color-ux_piste_expert_contrast-rgb));

  --color-ux_piste_extreme-rgb: 219, 126, 33;
  --color-ux_piste_extreme: rgb(var(--color-ux_piste_extreme-rgb));

  --color-ux_piste_extreme_contrast-rgb: var(--color-brand_dark-rgb);
  --color-ux_piste_extreme_contrast: rgb(var(--color-ux_piste_extreme_contrast-rgb));

  --color-ux_piste_offPiste-rgb: var(--color-ux_warn-rgb);
  --color-ux_piste_offPiste: rgb(var(--color-ux_piste_offPiste-rgb));

  --color-ux_piste_offPiste_contrast-rgb: var(--color-ux_warn_contrast-rgb);
  --color-ux_piste_offPiste_contrast-: rgb(var(--color-ux_piste_offPiste_contrast-rgb));
}