@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
html:root {
  --background: 217.5 18.2% 8.6%;
  --foreground: 160 13% 95.5%;
  --card: 218.2 16.9% 12.7%;
  --card-foreground: 160 13% 95.5%;
  --popover: 218.2 16.9% 12.7%;
  --popover-foreground: 160 13% 95.5%;
  --primary: 160.5 100% 62%;
  --primary-foreground: 160 31% 5.7%;
  --secondary: 214.3 16.7% 16.5%;
  --secondary-foreground: 160 15.8% 92.5%;
  --muted: 216.9 17.8% 14.3%;
  --muted-foreground: 207.3 12% 63.9%;
  --accent: 161.4 69.6% 51%;
  --accent-foreground: 160 31% 5.7%;
  --destructive: 0 100% 73.9%;
  --destructive-foreground: 217.5 18.2% 8.6%;
  --border: 213.8 15.7% 20%;
  --input: 213.8 15.7% 20%;
  --ring: 160.5 100% 62%;
  --radius: 1rem;
  --font-heading: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 8px 24px -12px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 24px 60px -24px rgb(0 0 0 / 0.8);
}
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); }