@theme {
  --color-fd-background: hsl(0, 0%, 98%);
  --color-fd-foreground: hsl(0, 0%, 3.9%);
  --color-fd-muted: hsl(220, 90%, 96.1%);
  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
  --color-fd-popover: hsl(0, 0%, 98%);
  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
  --color-fd-card: hsl(220, 50%, 98%);
  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
  --color-fd-border: hsl(220, 50%, 89.8%);
  --color-fd-primary: hsl(210, 80%, 20.2%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-secondary: hsl(220, 90%, 96.1%);
  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
  --color-fd-accent: hsl(220, 50%, 94.1%);
  --color-fd-accent-foreground: hsl(0, 0%, 9%);
  --color-fd-ring: hsl(220, 100%, 63.9%);
}

.dark {
  --color-fd-background: hsl(220, 60%, 8%);
  --color-fd-foreground: hsl(220, 60%, 94.5%);
  --color-fd-muted: hsl(220, 50%, 10%);
  --color-fd-muted-foreground: hsl(220, 30%, 65%);
  --color-fd-popover: hsl(220, 50%, 10%);
  --color-fd-popover-foreground: hsl(220, 60%, 94.5%);
  --color-fd-card: hsla(220, 56%, 15%, 0.4);
  --color-fd-card-foreground: hsl(220, 60%, 94.5%);
  --color-fd-border: hsla(220, 50%, 50%, 0.2);
  --color-fd-primary: hsl(205, 100%, 85%);
  --color-fd-primary-foreground: hsl(0, 0%, 9%);
  --color-fd-secondary: hsl(220, 50%, 20%);
  --color-fd-secondary-foreground: hsl(220, 80%, 90%);
  --color-fd-accent: hsl(220, 40%, 20%);
  --color-fd-accent-foreground: hsl(220, 80%, 90%);
  --color-fd-ring: hsl(205, 100%, 85%);
}

.dark body {
  background-image: linear-gradient(
    rgba(5, 105, 255, 0.15),
    transparent 20rem,
    transparent
  );
  background-repeat: no-repeat;
}