.electricity-wizard {
  --elecwizard-blue: 208.06 100% 27.25%;
  --elecwizard-blue-dark: 215.53 92.68% 16.08%;
  --elecwizard-blue-light: 210 100% 91.76%;
  --elecwizard-blue-lighter: 210 100% 98.04%;
  --elecwizard-orange: 28.14 88.98% 49.8%;
  --elecwizard-orange-light: 28.19 79.05% 58.82%;

  --elecwizard-grey-dark: 210 10.81% 14.51%;
  --elecwizard-grey-light: 0 0% 89.8%;
  --elecwizard-white: 0 0% 100%;

  --primary: var(--elecwizard-orange);
  --secondary: var(--elecwizard-blue);
  --foreground: var(--elecwizard-grey-dark);
  --accent: var(--elecwizard-blue-lighter);
  --muted-foreground: hsl(var(--elecwizard-grey-dark) / 0.75);

  --button-radius: 50rem;
  --input-radius: 50rem;
  --card-radius: 1rem;

  --border: var(--elecwizard-grey-light);
  --input: var(--elecwizard-grey-light);
  --ring: var(--elecwizard-blue-light);

  --header-background: hsl(var(--elecwizard-blue));
  --header-foreground: hsl(var(--elecwizard-white));
  --header-selected-background: hsl(var(--primary) / 0.2);
  --footer-background: hsl(var(--elecwizard-white));
  --footer-foreground: var(--elecwizard-grey-dark);

  --milestone-header-background: hsl(var(--elecwizard-blue));
  --milestone-background: hsl(var(--elecwizard-blue));
  --milestone-foreground: hsl(var(--elecwizard-white));
  --milestone-heading: hsl(var(--elecwizard-orange));

  --link: var(--elecwizard-blue);

  --text-heading: var(--elecwizard-blue-dark);
  --text-subheading: var(--elecwizard-grey-dark);

  --card-pill-background: var(--secondary);
  --card-pill-foreground: var(--elecwizard-white);
}