.goscout {
  --goscout-yellow: 47.92 98% 67%;
  --goscout-white: 0 0% 100%;
  --goscout-grey-lighter: 300 0% 96%;
  --goscout-grey-light: 330 0% 90%;
  --goscout-grey: 0 0% 63%;
  --goscout-grey-dark: 300 0% 45%;
  --goscout-grey-darker: 330 0% 9%;
  --goscout-black: 0 0% 0%;

  --primary: var(--goscout-yellow);
  --primary-foreground: var(--goscout-black);
  --secondary: var(--goscout-grey-darker);
  --background: var(--goscout-white);
  --foreground: var(--goscout-black);

  --muted: var(--goscout-grey-lighter);
  --muted-foreground: var(--goscout-grey-dark);
  --accent: var(--goscout-grey-lighter);

  --border: var(--goscout-grey-light);
  --input: var(--goscout-grey-light);
  --ring: var(--goscout-grey);

  --button-radius: 0.5rem;
  --input-radius: 0.5rem;
  --card-radius: 0.875rem;

  --logo: url('/images/goscout/goscout-logo-main.svg');
  --header-background: hsl(var(--goscout-yellow));
  --header-foreground: var(--goscout-grey-darker);
  --header-selected-background: hsl(var(--secondary));
  --footer-background: hsl(var(--goscout-grey-lighter));
  --footer-foreground: var(--goscout-grey-dark);

  --milestone-background: hsl(var(--primary));
  --milestone-header-background: hsl(var(--primary));
  --milestone-heading: hsl(var(--text-heading));
  --milestone-foreground: hsl(var(--text-subheading));

  --text-heading: var(--goscout-black);
  --text-subheading: var(--goscout-grey-dark);

  --button-secondary-foreground: var(--goscout-black);
  --button-outline-selected-foreground: var(--goscout-black);
}