@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@1296,500800&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");
html:root {
  --background: 42.9 30.4% 95.5%;
  --foreground: 213.3 12.7% 13.9%;
  --card: 0 0% 100%;
  --card-foreground: 213.3 12.7% 13.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 213.3 12.7% 13.9%;
  --primary: 224.3 76.3% 48%;
  --primary-foreground: 0 0% 100%;
  --secondary: 42.9 24.1% 88.6%;
  --secondary-foreground: 213.3 12.7% 13.9%;
  --muted: 43.6 24.4% 91.2%;
  --muted-foreground: 214.3 10.3% 39.8%;
  --accent: 42.2 49.1% 89.2%;
  --accent-foreground: 35.2 95.3% 24.9%;
  --destructive: 0 72.2% 50.6%;
  --destructive-foreground: 0 0% 100%;
  --border: 42.4 19.5% 82.9%;
  --input: 42 16.7% 76.5%;
  --ring: 224.3 76.3% 48%;
  --radius: 0.75rem;
  --font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow-sm: 0 1px 2px rgb(31 35 40 / 0.06);
  --shadow-md: 0 6px 16px -6px rgb(31 35 40 / 0.12);
  --shadow-lg: 0 24px 48px -16px rgb(31 35 40 / 0.22);
}
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); }