/* ================================
   MITHILITE - COLOR SCHEME OVERRIDES
   Exact match from React version
   ================================ */

/* Exact HSL values from React Tailwind config */

/* Background color - Very light warm cream */
body,
.main-content {
  background-color: hsl(30, 30%, 97%) !important;
}

/* Page sections background */
.hero-section,
.features-section,
.cta-section,
.about-hero,
.contact-hero {
  background-color: hsl(30, 30%, 97%);
}

/* Navbar & Footer - Match exact background with cream tone */
.navbar,
.glass-navbar {
  background-color: hsl(30, 30%, 97%) !important;
  background: hsl(30, 30%, 97%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid hsl(30, 20%, 85%);
  box-shadow: 0 1px 3px rgba(21, 80, 21, 0.05);
}

.glass-footer {
  background-color: hsl(30, 30%, 97%) !important;
  background: hsl(30, 30%, 97%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid hsl(30, 20%, 85%);
}

/* Card surfaces - Light cream */
.glass-effect,
.feature-card,
.card {
  background-color: hsl(30, 25%, 95%) !important;
  border-color: hsl(30, 20%, 85%) !important;
}

.glass-effect:hover,
.feature-card:hover {
  background-color: hsl(30, 28%, 93%) !important;
  border-color: hsl(345, 45%, 55%) !important;
}

/* Primary color elements */
.btn-primary,
.badge-primary {
  background-color: hsl(345, 45%, 55%) !important;
  color: hsl(30, 30%, 97%) !important;
}

.btn-primary:hover {
  background-color: hsl(345, 45%, 45%) !important;
}

/* Text colors */
body,
.text-dark,
h1, h2, h3, h4, h5, h6 {
  color: hsl(15, 50%, 15%) !important;
}

.text-muted {
  color: hsl(15, 20%, 45%) !important;
}

/* Border colors */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: hsl(30, 20%, 85%) !important;
}

/* Form elements */
.form-control,
.form-select,
textarea {
  background-color: hsl(30, 25%, 95%);
  border-color: hsl(30, 20%, 85%);
  color: hsl(15, 50%, 15%);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  background-color: hsl(30, 25%, 95%);
  border-color: hsl(345, 45%, 55%);
  color: hsl(15, 50%, 15%);
  box-shadow: 0 0 0 3px hsla(345, 45%, 55%, 0.1);
}

/* Icon backgrounds */
.icon-circle,
.icon-circle-sm,
.icon-circle-lg {
  background-color: hsla(345, 45%, 55%, 0.1) !important;
}

.icon-circle-sm:hover,
.icon-circle:hover {
  background-color: hsl(345, 45%, 55%) !important;
  color: white !important;
}

.bg-primary-light {
  background-color: hsla(345, 45%, 55%, 0.1) !important;
}

/* Gradients */
.gradient-text {
  background: linear-gradient(135deg, hsl(345, 45%, 55%) 0%, hsl(345, 35%, 65%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient {
  background: linear-gradient(135deg, hsl(345, 45%, 55%) 0%, hsl(345, 35%, 65%) 100%) !important;
}

.bg-gradient-light {
  background: linear-gradient(135deg, hsla(345, 45%, 55%, 0.05) 0%, hsla(345, 35%, 65%, 0.05) 100%) !important;
}

/* Social icons */
.social-icon {
  background-color: hsla(345, 45%, 55%, 0.1) !important;
  color: hsl(345, 45%, 55%) !important;
}

.social-icon:hover {
  background-color: hsl(345, 45%, 55%) !important;
  color: white !important;
}

/* Links and hover states */
a {
  color: hsl(345, 45%, 55%);
}

a:hover {
  color: hsl(345, 45%, 45%);
}

/* Alert elements */
.alert-success {
  background-color: hsla(120, 50%, 50%, 0.1);
  border-color: hsl(120, 50%, 50%);
  color: hsl(120, 50%, 30%);
}

.alert-danger {
  background-color: hsla(0, 84%, 60%, 0.1);
  border-color: hsl(0, 84%, 60%);
  color: hsl(0, 84%, 40%);
}

/* Badge colors */
.badge {
  background-color: hsl(345, 45%, 55%) !important;
}

.badge-primary {
  background-color: hsl(345, 45%, 55%) !important;
}

/* Buttons outline */
.btn-outline-primary {
  color: hsl(345, 45%, 55%) !important;
  border-color: hsl(345, 45%, 55%) !important;
}

.btn-outline-primary:hover {
  background-color: hsl(345, 45%, 55%) !important;
  color: white !important;
  border-color: hsl(345, 45%, 55%) !important;
}

/* Navigation active state */
.navbar-nav .nav-link.active {
  color: hsl(345, 45%, 55%) !important;
  border-bottom-color: hsl(345, 45%, 55%) !important;
}

/* Focus states for accessibility */
:focus-visible {
  outline: 2px solid hsl(345, 45%, 55%);
  outline-offset: 2px;
}

/* Animations and transitions */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

@keyframes float-delayed {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

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

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 6s ease-in-out infinite;
  animation-delay: 0.3s;
}

.animate-slide-up {
  animation: slide-up 0.6s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out;
}

/* Smooth transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

button,
a,
input,
textarea,
select {
  transition: all 0.3s ease;
}

/* Print styles */
@media print {
  body {
    background-color: white;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  body {
    background-color: hsl(30, 40%, 95%);
  }
  
  .text-muted {
    color: hsl(15, 50%, 20%) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}