@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* Playful Professional Theme (Default) */
  --bg-color: #FAFAFA;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --accent-primary: #F77EB3; /* Bright Pink */
  --accent-secondary: #CD7DF5; /* Light Purple */
  --card-bg: #FFFFFF;
  --border-color: #E2E8F0;
  
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="dark"] {
  /* Dark Mode / Dev Theme */
  --bg-color: #121212;
  --text-primary: #E2E8F0;
  --text-secondary: #9CA3AF;
  --accent-primary: #A855F7; /* Neon Purple */
  --accent-secondary: #C9E063; /* Lime Green */
  --card-bg: #1F2937;
  --border-color: #374151;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-primary);
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Typography utilities */
.font-heading { font-family: var(--font-heading); }
.font-mono { font-family: var(--font-mono); }

/* Custom utility classes linking to CSS vars so Tailwind can use them easily via normal classes if needed, 
   but with Tailwind v4 CDN we can use inline bg-[var(--bg-color)] etc. */

/* Animations */
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: scrollMarquee 20s linear infinite;
}

/* Pause marquee on hover */
.marquee-container:hover .animate-marquee {
  animation-play-state: paused;
}

/* Terminal Toggle Animation */
@keyframes terminalBoot {
  0% { opacity: 0; transform: scale(0.98); filter: blur(2px); }
  20% { opacity: 1; transform: scale(1); filter: blur(0); }
  40% { opacity: 0.9; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}

.animate-boot {
  animation: terminalBoot 0.6s ease-out forwards;
}

/* Glitch effect for toggle */
@keyframes glitch {
  0% { transform: translate(0) }
  20% { transform: translate(-2px, 2px) }
  40% { transform: translate(-2px, -2px) }
  60% { transform: translate(2px, 2px) }
  80% { transform: translate(2px, -2px) }
  100% { transform: translate(0) }
}

.animate-glitch {
  animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both;
}

/* Smooth reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Code block syntax highlighting colors for Terminal View */
.token-keyword { color: #CD7DF5; } /* Purple */
.token-function { color: #60A5FA; } /* Blue */
.token-string { color: #C9E063; } /* Lime */
.token-property { color: #F77EB3; } /* Pink */
.token-punctuation { color: #E2E8F0; } /* Light Gray */

/* Hide scrollbar for clean look */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}