:root {
  /* HERO UI BASE COLOURS */
  --base-default: #f6f8fc; /* midBackground */
  --base-primary: #1375d6; /* accent */
  --base-primary-muted: #1375d61c; /* (not a hero ui colour specifically) accentMuted */
  --base-secondary: #66a053; /* 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: #000;
  --text-ghost: #ffffffa1; /* new */

  /* BORDER */
  --border-overlay-on-media: #fff; /*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: #ffffff19; /* new */
  --border-default: #e1e3e8; /* new midBorder darkBorder midDivider darkBorder */
  --border-dark: #bebebe; /* darkDivider */

  /*BACKGROUNDS */
  --bg-hub-navigation: #00000050; /* navigationBackground */
  --bg-overlay-on-media: #fff; /* 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: #ffffff19; /*new */
  --bg-surface: #ffffff; /* new */
  --bg-light: #f5f7fb; /* lightBackground */
  --bg-mid: #f6f8fc; /* midBackground */
  --bg-dark: #edf2fc; /* darkBackground */

  /* GRADIENTS */
  --gradient-primary-button-start: #3d73d0; /* primary-button-gradient-from */
  --gradient-primary-button-end: #3050b9; /* primary-button-gradient-to */
  --gradient-long-start: #3d73d0; /* placeholder-gradient-from */
  --gradient-long-end: #2f4fb9; /* placeholder-gradient-to */
  --gradient-short-start: #3865c6; /* placeholder-gradient-short-from */
  --gradient-short-end: #3356bf; /* placeholder-gradient-short-to*/
  --gradient-hub-start: #000000ff; /* hub-gradient-start */
  --gradient-hub-via: #31267400; /* hub-gradient-via */
  --gradient-hub-end: #31267400; /* hub-gradient-end  */
}
