@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #050507;
  color: #fff;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.gradient-bg {
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(16, 185, 129, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(56, 189, 248, 0.10), transparent 60%);
}

.terminal-text {
  font-family: var(--font-mono);
  color: #a7f3d0;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.shimmer-text {
  background: linear-gradient(90deg, #fff 0%, #fff 30%, #34d399 50%, #fff 70%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3s linear infinite;
}

.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black, transparent 80%);
}