/* Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Brand Constants */
  --color-brand-red: #810C05;
  --color-brand-purple: #d946ef;
  --color-brand-blue: #1871AD;
  
  /* Theme Variables - Light Mode (Default) */
  --bg-primary: #f8fafc; /* slate-50 */
  --bg-card: #ffffff; /* white */
  --text-primary: #0f172a; /* slate-900 */
  --text-secondary: #334155; /* slate-700 */
  --text-muted: #64748b; /* slate-500 */
  --border-color: rgba(15, 23, 42, 0.08);
  --border-color-hover: rgba(129, 12, 5, 0.4);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --grid-color: rgba(15, 23, 42, 0.03);
  --blob-opacity: 0.08;
  --scrollbar-track: #f1f5f9; /* slate-100 */
  
  color-scheme: light;
}

html.dark {
  /* Theme Variables - Dark Mode (Override) */
  --bg-primary: #030712; /* slate-950 */
  --bg-card: #09090b; /* zinc-950 */
  --text-primary: #f8fafc; /* slate-50 */
  --text-secondary: #cbd5e1; /* slate-300 */
  --text-muted: #71717a; /* zinc-500 */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(129, 12, 5, 0.4);
  --glass-bg: rgba(15, 23, 42, 0.4);
  --grid-color: rgba(255, 255, 255, 0.02);
  --blob-opacity: 0.15;
  --scrollbar-track: #09090b;
  
  color-scheme: dark;
}

/* Smooth transitions for theme switching */
body, header, section, footer, div, h1, h2, h3, h4, p, span, a, button, input, textarea {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-brand-red) 0%, var(--color-brand-purple) 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a51208 0%, #e06cf5 100%);
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
}

/* Custom Headings Font */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* Cyber Grid Background */
.cyber-grid {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Animated Neon Aura Blobs */
.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: var(--blob-opacity);
  pointer-events: none;
  z-index: 0;
  animation: float-slow 20s infinite ease-in-out;
}

.glow-blob-red {
  background: radial-gradient(circle, var(--color-brand-red) 0%, transparent 70%);
  width: 450px;
  height: 450px;
}

.glow-blob-indigo {
  background: radial-gradient(circle, var(--color-brand-purple) 0%, transparent 70%);
  width: 500px;
  height: 500px;
  animation-delay: -5s;
}

.glow-blob-purple {
  background: radial-gradient(circle, #db2777 0%, transparent 70%); /* rose-600 */
  width: 400px;
  height: 400px;
  animation-delay: -10s;
}

/* Keyframe Animations */
@keyframes float-slow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

/* Custom Text Shimmer Effect */
.shimmer-text {
  background: linear-gradient(to right, var(--text-primary) 20%, var(--color-brand-red) 40%, #db2777 60%, var(--text-primary) 80%);
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shine 8s linear infinite;
}

html.dark .shimmer-text {
  background: linear-gradient(to right, var(--text-primary) 20%, #fca5a5 40%, var(--color-brand-red) 60%, var(--text-primary) 80%);
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* Glassmorphism panel base */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
}

/* Card hover scaling and border highlights */
.hover-card-highlight {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-card-highlight:hover {
  transform: translateY(-4px);
  border-color: var(--border-color-hover);
  box-shadow: 0 10px 30px -10px rgba(129, 12, 5, 0.25);
}

/* Neon Glow Outline */
.neon-border-red {
  box-shadow: 0 0 15px rgba(129, 12, 5, 0.2);
}

.neon-border-indigo {
  box-shadow: 0 0 15px rgba(217, 70, 239, 0.15);
}

/* Custom visual progress line */
.timeline-line-glow {
  background: linear-gradient(to bottom, var(--color-brand-red) 0%, var(--color-brand-purple) 100%);
  box-shadow: 0 0 8px rgba(129, 12, 5, 0.3);
}

/* Custom interactive calendar styling */
.calendar-day {
  transition: all 0.2s ease-in-out;
}

.calendar-day:not(.disabled):hover {
  background-color: rgba(129, 12, 5, 0.08);
  border-color: rgba(129, 12, 5, 0.5);
  color: var(--color-brand-red);
}

html.dark .calendar-day:not(.disabled):hover {
  background-color: rgba(129, 12, 5, 0.15);
  border-color: rgba(129, 12, 5, 0.5);
  color: var(--color-brand-red);
}

/* Active buttons and links specific corrections */
.btn-red-gradient {
  background: linear-gradient(135deg, var(--color-brand-red) 0%, var(--color-brand-purple) 100%);
}

.btn-red-gradient:hover {
  box-shadow: 0 4px 20px rgba(129, 12, 5, 0.4);
}