@theme {
  --color-fd-background: hsl(0, 0%, 98%);
  --color-fd-foreground: hsl(0, 0%, 3.9%);
  --color-fd-muted: hsl(0, 0%, 96.1%);
  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
  --color-fd-popover: hsl(0, 0%, 100%);
  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
  --color-fd-card: hsl(0, 0%, 99.7%);
  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
  --color-fd-border: hsla(0, 0%, 60%, 0.2);
  --color-fd-primary: hsl(0, 0%, 9%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-secondary: hsl(0, 0%, 96.1%);
  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
  --color-fd-accent: hsl(0, 0%, 94.1%);
  --color-fd-accent-foreground: hsl(0, 0%, 9%);
  --color-fd-ring: hsl(0, 0%, 63.9%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 2%);
  --color-fd-foreground: hsl(0, 0%, 98%);
  --color-fd-muted: hsl(0, 0%, 8%);
  --color-fd-muted-foreground: hsl(0, 0%, 60%);
  --color-fd-popover: hsl(0, 0%, 4%);
  --color-fd-popover-foreground: hsl(0, 0%, 98%);
  --color-fd-card: hsl(0, 0%, 4%);
  --color-fd-card-foreground: hsl(0, 0%, 98%);
  --color-fd-border: hsl(0, 0%, 50%, 0.2);
  --color-fd-primary: hsl(0, 0%, 98%);
  --color-fd-primary-foreground: hsl(0, 0%, 9%);
  --color-fd-secondary: hsl(0, 0%, 12.9%);
  --color-fd-secondary-foreground: hsl(0, 0%, 98%);
  --color-fd-accent: hsl(0, 0%, 15%);
  --color-fd-accent-foreground: hsl(0, 0%, 100%);
  --color-fd-ring: hsl(0, 0%, 34.9%);
}