@import url("./theme-root.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --font-inter: "Inter", Arial, Helvetica, sans-serif;
  --font-display: "Space Grotesk", var(--font-inter);
}

html {
  scroll-behavior: smooth;
}

*,
::after,
::before {
  border-color: hsl(var(--border));
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
  font-family: var(--font-inter);
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.1), transparent 24%),
    hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--font-display), var(--font-inter);
  letter-spacing: -0.03em;
}

::selection {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}