@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9144,400;9144,500;9144,600&family=Source+Sans+3:wght@400;500;600;700&display=swap");
html:root {
  --background: 36 55.6% 96.5%;
  --foreground: 312 13.2% 14.9%;
  --card: 40 100% 98.8%;
  --card-foreground: 312 13.2% 14.9%;
  --popover: 40 100% 98.8%;
  --popover-foreground: 312 13.2% 14.9%;
  --primary: 316.5 37.2% 26.9%;
  --primary-foreground: 36 55.6% 96.5%;
  --secondary: 33.3 37.5% 90.6%;
  --secondary-foreground: 317.6 16.2% 20.6%;
  --muted: 34.3 35% 92.2%;
  --muted-foreground: 324 7.9% 37.1%;
  --accent: 104 23.8% 87.6%;
  --accent-foreground: 130.3 24% 23.7%;
  --destructive: 4.2 76.5% 40%;
  --destructive-foreground: 0 0% 100%;
  --border: 33 27.8% 85.9%;
  --input: 31.2 22.1% 77.8%;
  --ring: 316.5 37.2% 26.9%;
  --radius: 0.75rem;
  --font-heading: "Fraunces", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "ui-monospace", ui-monospace, monospace;
  --shadow-sm: 0 1px 2px rgb(43 33 41 / 0.06);
  --shadow-md: 0 6px 16px -6px rgb(43 33 41 / 0.14);
  --shadow-lg: 0 22px 48px -20px rgb(43 33 41 / 0.28);
}
html .dark {
  --background: 320 12.5% 9.4%;
  --foreground: 27.7 33.3% 92.4%;
  --card: 315 12.9% 12.2%;
  --card-foreground: 27.7 33.3% 92.4%;
  --popover: 315 12.9% 12.2%;
  --popover-foreground: 27.7 33.3% 92.4%;
  --primary: 320.4 44.8% 79.4%;
  --primary-foreground: 313 37.7% 12%;
  --secondary: 313.3 11.1% 15.9%;
  --secondary-foreground: 26.7 36% 90.2%;
  --muted: 315 10.5% 14.9%;
  --muted-foreground: 321.4 9.5% 71%;
  --accent: 131.3 16% 19.6%;
  --accent-foreground: 108.9 32.5% 83.7%;
  --destructive: 5.5 82.2% 71.4%;
  --destructive-foreground: 320 12.5% 9.4%;
  --border: 318 9.3% 21.2%;
  --input: 320 8.8% 26.7%;
  --ring: 320.4 44.8% 79.4%;
}
html body { font-family: var(--font-body); }
html h1, html h2, html h3, html h4, html h5, html h6, html .font-heading, html .font-display { font-family: var(--font-heading); }
html .font-sans, html .font-body { font-family: var(--font-body); }
html .font-mono { font-family: var(--font-mono); }
