@layer base, components, utilities;

:root {

  --bg: #0b1020;
  --card: #121a2e;

  --text: #e5e7eb;
  --muted: #94a3b8;

  --primary: #00d9ff;
  --secondary: #7c3aed;

  --border: rgba(255,255,255,0.08);

  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  background:
    radial-gradient(circle at top left,
    rgba(0,217,255,0.15),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(124,58,237,0.12),
    transparent 30%),

    var(--bg);

  color: var(--text);

  font-family: var(--font-body);

  min-height: 100vh;

  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

section {
  padding:
    clamp(5rem, 10vw, 8rem)
    clamp(1.5rem, 5vw, 6rem);
}