@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100125,500800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
html:root {
  --background: 42.9 28% 95.1%;
  --foreground: 222.9 13.7% 10%;
  --card: 0 0% 100%;
  --card-foreground: 222.9 13.7% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.9 13.7% 10%;
  --primary: 224.3 76.3% 48%;
  --primary-foreground: 0 0% 100%;
  --secondary: 42 20% 90.2%;
  --secondary-foreground: 222 13.9% 14.1%;
  --muted: 40 22% 92%;
  --muted-foreground: 43.6 6.4% 33.5%;
  --accent: 222.9 72.4% 94.3%;
  --accent-foreground: 224.4 64.3% 32.9%;
  --destructive: 0 73.7% 41.8%;
  --destructive-foreground: 0 0% 100%;
  --border: 42.9 16.7% 83.5%;
  --input: 42.4 15% 77.8%;
  --ring: 224.3 76.3% 48%;
  --radius: 0.375rem;
  --font-heading: "Archivo", 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 0 rgba(22, 24, 29, 0.06);
  --shadow-md: 0 1px 2px 0 rgba(22, 24, 29, 0.05), 0 4px 12px -4px rgba(22, 24, 29, 0.12);
  --shadow-lg: 0 2px 4px 0 rgba(22, 24, 29, 0.04), 0 18px 40px -16px rgba(22, 24, 29, 0.28);
}
html .dark {
  --background: 216 12.2% 8%;
  --foreground: 42 20.8% 90.6%;
  --card: 217.5 13.3% 11.8%;
  --card-foreground: 42 20.8% 90.6%;
  --popover: 217.5 13.3% 11.8%;
  --popover-foreground: 42 20.8% 90.6%;
  --primary: 224.2 81.6% 68%;
  --primary-foreground: 225.7 48.8% 8.4%;
  --secondary: 218.2 12.6% 17.1%;
  --secondary-foreground: 42 20.8% 90.6%;
  --muted: 220 11.7% 15.1%;
  --muted-foreground: 42 5.2% 62.4%;
  --accent: 222.2 37.4% 19.4%;
  --accent-foreground: 224.4 86.2% 88.6%;
  --destructive: 0 72.2% 50.6%;
  --destructive-foreground: 0 0% 100%;
  --border: 218.2 10.7% 20.2%;
  --input: 216.9 10.1% 25.3%;
  --ring: 224.2 81.6% 68%;
}
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); }