@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap");
html:root {
  --background: 42 33.3% 94.1%;
  --foreground: 215.4 47% 16.3%;
  --card: 0 0% 100%;
  --card-foreground: 215.4 47% 16.3%;
  --popover: 0 0% 100%;
  --popover-foreground: 215.4 47% 16.3%;
  --primary: 17.7 64.7% 40%;
  --primary-foreground: 30 100% 98%;
  --secondary: 41.2 25% 87.5%;
  --secondary-foreground: 215.4 47% 16.3%;
  --muted: 41.5 25.5% 90%;
  --muted-foreground: 216.9 12.6% 40.4%;
  --accent: 30 46.2% 89.8%;
  --accent-foreground: 215.4 47% 16.3%;
  --destructive: 4.2 76.5% 40%;
  --destructive-foreground: 0 0% 100%;
  --border: 39 22.7% 82.7%;
  --input: 39 8.7% 54.9%;
  --ring: 17.7 64.7% 40%;
  --radius: 0.375rem;
  --font-heading: "Barlow Semi Condensed", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow-sm: 0 1px 2px rgb(22 38 61 / 0.06);
  --shadow-md: 0 6px 16px -4px rgb(22 38 61 / 0.12);
  --shadow-lg: 0 24px 48px -16px rgb(22 38 61 / 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); }