:root {
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --background: 34 35% 96%;
  --foreground: 223 38% 14%;
  --card: 0 0% 100%;
  --card-foreground: 223 38% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 223 38% 14%;
  --primary: 28 96% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 223 26% 92%;
  --secondary-foreground: 223 30% 18%;
  --muted: 223 24% 92%;
  --muted-foreground: 223 16% 38%;
  --accent: 28 96% 50%;
  --accent-foreground: 0 0% 100%;
  --success: 120 52% 32%;
  --success-foreground: 0 0% 100%;
  --destructive: 0 70% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 224 20% 82%;
  --input: 224 20% 82%;
  --ring: 28 96% 50%;
}

.dark {
  --background: 224 34% 8%;
  --foreground: 210 40% 96%;
  --card: 224 30% 11%;
  --card-foreground: 210 40% 96%;
  --popover: 224 30% 11%;
  --popover-foreground: 210 40% 96%;
  --primary: 28 100% 56%;
  --primary-foreground: 0 0% 8%;
  --secondary: 224 24% 16%;
  --secondary-foreground: 210 40% 96%;
  --muted: 224 22% 14%;
  --muted-foreground: 214 22% 78%;
  --accent: 28 100% 56%;
  --accent-foreground: 0 0% 8%;
  --success: 120 50% 35%;
  --success-foreground: 0 0% 100%;
  --destructive: 0 68% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 224 18% 24%;
  --input: 224 18% 24%;
  --ring: 28 100% 56%;
}

html,
body {
  font-family: var(--font-sans);
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.blog-content [class*='aspect-[16/9]'] img,
.blog-content article figure img,
.blog-content .prose img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  object-position: center;
}

.blog-content .prose a {
  color: hsl(var(--accent));
}

.blog-content .prose a:hover {
  color: hsl(var(--accent) / 0.85);
}