/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* 1. CSS Variables (The Theme) */
:root {
  --background: 0 0% 4%;
  --foreground: 60 100% 98%;
  --primary: 66 100% 51%;
  --primary-foreground: 0 0% 4%;
  --muted-foreground: 0 0% 60%;
  --border: 0 0% 18%;
  
  /* Custom Tokens */
  --glow-primary: 0 0 40px hsl(66 100% 51% / 0.3);
  --glow-primary-strong: 0 0 60px hsl(66 100% 51% / 0.5);
  --gradient-accent: linear-gradient(135deg, hsl(66 100% 51%) 0%, hsl(56 100% 50%) 100%);
  --gradient-card: linear-gradient(135deg, hsl(0 0% 10%) 0%, hsl(0 0% 6%) 100%);
}

/* 2. Base Styles */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Space Grotesk', sans-serif;
}

/* 3. Custom Component Classes (The Logic) */
.text-gradient {
  background-image: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.card-gradient {
  background: var(--gradient-card);
}

.border-glow {
  border: 1px solid hsla(66, 100%, 51%, 0.3);
  box-shadow: inset 0 0 20px hsla(66, 100%, 51%, 0.05);
}

/* 4. Animations */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-slide-up {
  animation: slideUp 0.6s ease-out forwards;
  opacity: 0; /* Starts hidden */
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Tailwind-like Utility Mappings (For the classes used in HTML) */
.bg-background { background-color: hsl(var(--background)) !important; }
.text-foreground { color: hsl(var(--foreground)) !important; }
.text-muted-foreground { color: hsl(var(--muted-foreground)) !important; }
.border-border { border-color: hsl(var(--border)) !important; }
.bg-primary { background-color: hsl(var(--primary)) !important; }
.text-primary { color: hsl(var(--primary)) !important; }


/*  */

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}