.beneyou {
  --beneyou-navy: 214.56 93.78% 13.65%;
  --beneyou-navy-dark: 215.57 83.2% 11.55%;
  --beneyou-green: 139.65 43.96% 55.49%;
  --beneyou-orange: 26.56 100% 63.64%;
  --beneyou-cream: 43.14 65.25% 96.36%;

  --beneyou-white: 0 0% 100%;
  --beneyou-grey-lighter: 213.47 17.97% 87.44%;
  --beneyou-grey-light: 233.06 6.25% 64.06%;
  --beneyou-grey: 212.96 14.81% 39.85%;
  --beneyou-black: 233.01 12.62% 3.93%;
  
  --primary: var(--beneyou-navy);
  --secondary: var(--beneyou-green);
  --accent: var(--beneyou-cream);
  --background: var(--beneyou-white);
  --foreground: var(--beneyou-navy-dark);
  --muted-foreground: var(--beneyou-grey);

  --button-radius: 99rem;
  --input-radius: 0.875rem;
  --card-radius: 1.25rem;

  --input: var(--beneyou-grey-lighter);
  --ring: var(--primary);
  --border: var(--foreground) / 0.1;

  --font-family-heading: var(--font-nunitosans);
  --font-family-body: var(--font-inter);

  --header-selected-background: hsl(var(--secondary) / 0.2);
  --footer-background: hsl(var(--beneyou-black));
  --footer-foreground: var(--beneyou-grey-light);

  --milestone-header-background: hsl(var(--beneyou-cream));
  --milestone-background: hsl(var(--beneyou-cream));
  --milestone-foreground: hsl(var(--foreground));
  --milestone-heading: hsl(var(--foreground));

  --text-heading: var(--beneyou-navy-dark);
  --text-subheading: var(--beneyou-grey);

  --card-pill-background: var(--beneyou-green);
  --card-pill-foreground: var(--beneyou-white);

  --button-secondary-background: var(--beneyou-orange);
  --button-secondary-border: var(--beneyou-orange);
  --button-secondary-foreground: var(--beneyou-navy-dark);
  --button-secondary-hover-background: hsl(from hsl(var(--beneyou-orange)) h s calc(l + 10));
  --button-secondary-active-background: hsl(from hsl(var(--beneyou-orange)) h s calc(l + 10));

  --button-outline-hover-background: var(--beneyou-green) / 0.1;
  --button-outline-active-background: var(--beneyou-green) / 0.2;
  --button-outline-selected-background: var(--beneyou-green) / 0.05;
  --button-outline-selected-border: var(--beneyou-green);
  --button-outline-selected-foreground: var(--beneyou-green);
  --button-outline-selected-hover-background: var(--beneyou-green) / 0.1;

  --minicard-background: var(--beneyou-green) / 0.05;
  --minicard-border: var(--beneyou-green);
  --minicard-pill-background: var(--beneyou-green) / 0.1;
  --minicard-pill-foreground: var(--beneyou-green);
}