.better-switch {
  --background: 0 0% 100%;
  --foreground: 0 0 0%;

  --card: 0 0% 100%;
  --card-foreground: 210 11% 15%;

  --popover: 0 0% 100%;
  --popover-foreground: 210 11% 15%;

  --primary: 209 70% 69%;
  --primary-foreground: 0 0% 100%;

  --secondary: 168 71% 43%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 89%;
  --muted-foreground: 0 0% 34%;
  --accent: 51 41% 97%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 84% 60%;
  --information: 13 90% 92%;
  --information-foreground: 0 0% 20%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: var(--primary);

  --radius: 0;
  --button-radius: 3.125rem;
  --input-radius: 1.563rem;
  --card-radius: 1.563rem;

  --font-family-heading: var(--font-dmsans);
  --font-family-body: var(--font-dmsans);

  --logo: url('/images/better-switch/better-switch-logo.webp');
  --header-background: hsl(var(--background));
  --header-foreground: hsl(var(--foreground));
  --header-selected-background: hsl(var(--primary) / 0.2);
  --header-logo: hsl(var(--foreground));
  --footer-background: hsl(var(--accent));
  --footer-foreground: var(--foreground);

  --milestone-header-background: hsl(var(--accent));
  --milestone-background: hsl(var(--accent));
  --milestone-foreground: hsl(var(--foreground));
  --milestone-heading: hsl(var(--primary));
}