:root {
  /* HERO UI BASE COLOURS */
  --base-default: #f6f8fc; /* midBackground */
  --base-primary: #fc6570; /* accent */
  --base-primary-muted: #fc607322; /* (not a hero ui colour specifically) accentMuted */
  --base-secondary: #fb8d5b; /* primary-button-gradient-to, placeholder-gradient-to placeholder-gradient-short-to */
  --base-success: #4ebf83; /* new */
  --base-warning: #1399e0; /* new */
  --base-danger: #ff4b61; /* new */

  /* TEXT */
  --text-light: #ffffff; /* lightText */
  --text-mid: #6c757d; /* midText */
  --text-dark: #434343; /* darkText */
  --text-overlay-on-media: #ffffff;
  --text-ghost: #ffffffa1; /* new */

  /* BORDER */
  --border-overlay-on-media: #ffffff52; /*Use these tokens for floating UI over media-rich bgs (hero images, video, etc.) Primarily used for the context menu on the search hub.*/
  --border-ghost: #ffffff4d; /* new */
  --border-default: #e1e3e8; /* new midBorder darkBorder midDivider darkBorder */
  --border-dark: #bebebe; /* darkDivider */

  /*BACKGROUNDS */
  --bg-hub-navigation: #ffffff1a; /* navigationBackground: #09123873; */
  --bg-overlay-on-media: #44444470; /* new (e.g. dark image is used for a background, so this has to be set accordingly - used on hub search bar filter dropdown) */
  --bg-ghost: #ffffff5c; /*new */
  --bg-surface: #ffffff; /* new */
  --bg-light: #f5f7fb; /* lightBackground: #f5f7fb; */
  --bg-mid: #f6f8fc; /* midBackground: #f6f8fc; */
  --bg-dark: #edf2fc; /* darkBackground: #edf2fc; */

  /* GRADIENTS */
  --gradient-primary-button-start: #fc6570; /* primary-button-gradient-from: #fc6570; */
  --gradient-primary-button-end: #fd3e86; /* primary-button-gradient-to: #fd3e86; */
  --gradient-long-start: #fc6570; /* placeholder-gradient-from: */
  --gradient-long-end: #fd3e86; /* placeholder-gradient-to: */
  --gradient-short-start: #fc6570; /* placeholder-gradient-short-from: */
  --gradient-short-end: #fd3e86; /* placeholder-gradient-short-to*/
  --gradient-hub-start: #010b30ff; /* hub-gradient-start: #010b30ff; */
  --gradient-hub-via: #30267400; /* hub-gradient-via: #30267400; */
  --gradient-hub-end: #30267400; /* hub-gradient-end: #30267400;  */
}