:root {
  /* Deep Space Dark Theme Variables */
  --background: 260 50% 5%;
  --foreground: 210 40% 98%;
  --card: 260 50% 8%;
  --card-foreground: 210 40% 98%;
  --popover: 260 50% 5%;
  --popover-foreground: 210 40% 98%;
  --primary: 270 100% 60%;
  --primary-foreground: 210 40% 98%;
  --secondary: 190 100% 50%;
  --secondary-foreground: 260 50% 5%;
  --muted: 260 30% 15%;
  --muted-foreground: 215 20% 65%;
  --accent: 260 40% 20%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 260 30% 20%;
  --input: 260 30% 20%;
  --ring: 270 100% 60%;
  --radius: 0.5rem;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: hsl(260, 50%, 5%);
  color: hsl(210, 40%, 98%);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: hsl(260 50% 5%); 
}
::-webkit-scrollbar-thumb {
  background: hsl(260 30% 30%); 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(270 100% 60%); 
}

/* Glassmorphism Utilities */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Utility classes for tags */
.skill-tag {
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.875rem;
    cursor: default;
    transition: all 0.2s;
}
.skill-tag:hover {
    background-color: hsla(270, 100%, 60%, 0.2);
    border-color: hsla(270, 100%, 60%, 0.5);
}

.tag {
    font-size: 0.75rem;
    font-family: monospace;
    padding: 0.25rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: hsla(270, 100%, 60%, 0.8);
}

/* Scroll Animation Utilities (Replacements for Framer Motion) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }