@import "tailwindcss";

:root {
  --bg-950: #05070d;
  --bg-900: #0b1020;
  --bg-800: #10172c;
  --text-100: #e5e7eb;
  --text-200: #cbd5f5;
  --accent-500: #7c3aed;
  --accent-400: #60a5fa;
  --accent-300: #22d3ee;
  --glass: rgba(15, 23, 42, 0.6);
  --glass-border: rgba(148, 163, 184, 0.2);
  --shadow-strong: 0 30px 80px rgba(2, 6, 23, 0.6);
}

@theme inline {
  --color-background: var(--bg-950);
  --color-foreground: var(--text-100);
  --font-sans: var(--font-display);
  --font-mono: var(--font-code);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(124, 58, 237, 0.25),
        transparent 60%),
    radial-gradient(900px 600px at 80% 15%, rgba(96, 165, 250, 0.25),
        transparent 55%),
    var(--bg-950);
  color: var(--text-100);
  font-family: var(--font-display), "Space Grotesk", sans-serif;
}

::selection {
  background: rgba(124, 58, 237, 0.55);
  color: #0f172a;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes glow {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.4;
  }
}

@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}