@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9144,400900&family=Archivo:wght@400700&family=JetBrains+Mono:wght@400;500&display=swap");
html:root {
  --background: 40 45.5% 93.5%;
  --foreground: 24.7 24.6% 13.5%;
  --card: 40 66.7% 96.5%;
  --card-foreground: 24.7 24.6% 13.5%;
  --popover: 40 66.7% 96.5%;
  --popover-foreground: 24.7 24.6% 13.5%;
  --primary: 24.5 64.7% 40%;
  --primary-foreground: 37.9 82.6% 95.5%;
  --secondary: 69.2 13.3% 38.4%;
  --secondary-foreground: 40 45.5% 93.5%;
  --muted: 39.2 38.2% 86.7%;
  --muted-foreground: 30.9 18.4% 35.1%;
  --accent: 40.6 35.6% 82.9%;
  --accent-foreground: 24.7 24.6% 13.5%;
  --destructive: 7.2 68.9% 37.8%;
  --destructive-foreground: 37.9 82.6% 95.5%;
  --border: 37.5 29.1% 78.4%;
  --input: 39 25.3% 69%;
  --ring: 24.5 64.7% 40%;
  --radius: 0.375rem;
  --font-heading: "Fraunces", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow-sm: 0 1px 2px rgb(43 33 26 / 0.07);
  --shadow-md: 0 10px 28px -16px rgb(43 33 26 / 0.32);
  --shadow-lg: 0 28px 64px -28px rgb(43 33 26 / 0.40);
}
html .dark {
  --background: 25.7 25.9% 10.6%;
  --foreground: 39.1 41.8% 89.2%;
  --card: 24.7 24.6% 13.5%;
  --card-foreground: 39.1 41.8% 89.2%;
  --popover: 24.7 24.6% 13.5%;
  --popover-foreground: 39.1 41.8% 89.2%;
  --primary: 27.7 62.1% 48.6%;
  --primary-foreground: 25.7 25.9% 10.6%;
  --secondary: 68 11.8% 49.8%;
  --secondary-foreground: 24 23.8% 8.2%;
  --muted: 27.3 26.2% 16.5%;
  --muted-foreground: 33.5 18.9% 64.7%;
  --accent: 27.5 26.1% 18%;
  --accent-foreground: 39.1 41.8% 89.2%;
  --destructive: 9.7 61.3% 47.6%;
  --destructive-foreground: 37.9 82.6% 95.5%;
  --border: 27.5 24% 19.6%;
  --input: 27.9 23.3% 23.5%;
  --ring: 27.7 62.1% 48.6%;
}
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); }