/* Custom animations and styles */
.tog-animation {
  position: relative;
  overflow: hidden;
}

.tog-animation::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 85, 0, 0.2), transparent);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.timeline-dot {
  position: relative;
}

.timeline-dot::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: rgba(255, 85, 0, 0.3);
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

.timeline-dot:last-child::after {
  display: none;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #FF5500 #FFF9F5;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #FFF9F5;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #FF5500;
  border-radius: 4px;
}

/* ========================================
   TRUE DARK MODE - Comprehensive Styles
   ======================================== */

/* Dark mode color variables */
.dark {
  --dark-bg-primary: #121212;
  --dark-bg-secondary: #1E1E1E;
  --dark-bg-tertiary: #2D2A26;
  --dark-bg-elevated: #2A2A2A;
  --dark-text-primary: #FFFFFF;
  --dark-text-secondary: #E0E0E0;
  --dark-text-muted: #A0A0A0;
  --dark-border: #3A3A3A;
  --dark-border-subtle: #2A2A2A;
}

/* Body and main backgrounds */
.dark body,
.dark .bg-warm-white {
  background-color: var(--dark-bg-primary) !important;
}

.dark .bg-warm-white\/95 {
  background-color: rgba(18, 18, 18, 0.95) !important;
}

/* Gradient backgrounds */
.dark .bg-gradient-to-b.from-warm-white {
  background: linear-gradient(to bottom, var(--dark-bg-primary), var(--dark-bg-secondary)) !important;
}

.dark .bg-gradient-to-br.from-deep-charcoal {
  background: linear-gradient(to bottom right, var(--dark-bg-secondary), #0a0a0a) !important;
}

/* Section backgrounds */
.dark .bg-deep-charcoal {
  background-color: #0a0a0a !important;
}

.dark .bg-orange-50\/30 {
  background-color: rgba(255, 107, 53, 0.05) !important;
}

/* Text colors */
.dark .text-deep-charcoal {
  color: var(--dark-text-primary) !important;
}

.dark .text-soft-gray {
  color: var(--dark-text-muted) !important;
}

.dark .text-white {
  color: var(--dark-text-primary) !important;
}

/* Card and glass effects */
.dark .glass {
  background: rgba(45, 42, 38, 0.8) !important;
  border-color: var(--dark-border) !important;
}

.dark .bg-white {
  background-color: var(--dark-bg-elevated) !important;
}

.dark .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Borders */
.dark .border-soft-gray {
  border-color: var(--dark-border) !important;
}

.dark .border-white\/20 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .border-togmo-orange\/20 {
  border-color: rgba(255, 107, 53, 0.3) !important;
}

/* Navbar */
.dark #navbar {
  background-color: rgba(18, 18, 18, 0.95) !important;
  border-bottom: 1px solid var(--dark-border-subtle);
}

.dark #navbar a:not(.bg-togmo-orange) {
  color: var(--dark-text-secondary) !important;
}

.dark #navbar a:not(.bg-togmo-orange):hover {
  color: #FF6B35 !important;
}

.dark #navbar button svg {
  color: var(--dark-text-secondary) !important;
}

/* Mobile menu */
.dark #mobileMenu {
  background-color: var(--dark-bg-primary) !important;
}

.dark #mobileMenu a {
  color: var(--dark-text-primary) !important;
}

/* Cards and feature boxes */
.dark .card-hover {
  background-color: var(--dark-bg-elevated) !important;
  border-color: var(--dark-border) !important;
}

.dark .bg-togmo-orange\/10 {
  background-color: rgba(255, 107, 53, 0.15) !important;
}

.dark .bg-togmo-orange\/5 {
  background-color: rgba(255, 107, 53, 0.08) !important;
}

/* Feature tabs */
.dark .feature-tab:not(.active) {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-secondary) !important;
}

/* Timeline section */
.dark .timeline-dot::after {
  background-color: rgba(255, 107, 53, 0.4) !important;
}

/* Form inputs */
.dark input,
.dark select,
.dark textarea {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.dark input::placeholder {
  color: var(--dark-text-muted) !important;
}

.dark select option {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

/* Mautic form dark mode */
.dark .mauticform-input,
.dark .mauticform-selectbox,
.dark .mauticform-textarea {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.dark .mauticform-label {
  color: var(--dark-text-secondary) !important;
}

/* Footer */
.dark footer {
  background-color: var(--dark-bg-primary) !important;
  border-color: var(--dark-border) !important;
}

/* Scrollbar for dark mode */
.dark .custom-scrollbar {
  scrollbar-color: #FF6B35 var(--dark-bg-secondary);
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}

/* Screenshot carousel */
.dark .screenshot-carousel {
  background: linear-gradient(90deg, var(--dark-bg-primary) 0%, transparent 5%, transparent 95%, var(--dark-bg-primary) 100%);
}

/* Stats and badges */
.dark .bg-warm-white.text-togmo-orange {
  background-color: var(--dark-bg-elevated) !important;
}

/* Testimonial cards */
.dark .bg-warm-white.rounded-2xl,
.dark .bg-warm-white.rounded-3xl {
  background-color: var(--dark-bg-elevated) !important;
}

/* University logos section */
.dark .bg-gradient-to-r {
  background: linear-gradient(to right, var(--dark-bg-secondary), var(--dark-bg-tertiary), var(--dark-bg-secondary)) !important;
}

/* Hover states */
.dark .hover\:bg-togmo-orange\/10:hover {
  background-color: rgba(255, 107, 53, 0.2) !important;
}

/* Phone frame in dark mode - keep orange but adjust shadow */
.dark .phone-frame {
  box-shadow: 
    0 50px 100px -20px rgba(0, 0, 0, 0.5),
    0 30px 60px -30px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(255, 107, 53, 0.15);
}

/* Value prop cards */
.dark .bg-warm-white.p-8 {
  background-color: var(--dark-bg-elevated) !important;
}

/* Section specific overrides */
.dark section.bg-warm-white {
  background-color: var(--dark-bg-primary) !important;
}

.dark section.bg-deep-charcoal {
  background-color: #0a0a0a !important;
}

/* Smooth transition for dark mode toggle */
body, 
.bg-warm-white,
.bg-deep-charcoal,
.text-deep-charcoal,
.text-soft-gray,
#navbar,
footer,
.glass,
.card-hover,
input,
select {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Micro-interactions */
.hover-float {
  transition: transform 0.3s ease;
}

.hover-float:hover {
  transform: translateY(-5px);
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 85, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 85, 0, 0);
  }
}