@import "tailwindcss";

:root {
  --background: #030712;
  --foreground: #e2e8f0;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-inter);
  --font-heading: var(--font-space-grotesk);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter), Arial, Helvetica, sans-serif;
  background-image: radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.14), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(129, 140, 248, 0.12), transparent 35%),
    linear-gradient(180deg, #020617 0%, #030712 30%, #020617 100%);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-space-grotesk), Arial, Helvetica, sans-serif;
}

* {
  border-color: rgba(148, 163, 184, 0.22);
}

::selection {
  background: rgba(34, 211, 238, 0.25);
  color: #f8fafc;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #020617;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#0ea5e9, #8b5cf6);
  border-radius: 9999px;
}