/* Seb Auto Service — variables de thème */

:root,
html[data-theme-mode="light"] {
  --sas-surface-primary: #c2efeb;
  --sas-surface-secondary: #5da3ff;
  --sas-heading: #216869;
  --sas-text: #001427;
  --sas-border: #c2efeb;
  --sas-border-secondary: #5da3ff;
  --sas-card-bg: #5da3ff;
  --sas-card-text: #001427;
  --sas-nav-bg: rgba(194, 239, 235, 0.92);
  --sas-shadow: rgba(33, 104, 105, 0.12);
  --sas-accent: #216869;
  --sas-star: #216869;
  --sas-hero-gradient: linear-gradient(135deg, #c2efeb 0%, #a8e8e2 50%, #5da3ff 100%);
}

html[data-theme-mode="dark"] {
  --sas-surface-primary: #216869;
  --sas-surface-secondary: #001427;
  --sas-heading: #c2efeb;
  --sas-text: #5da3ff;
  --sas-border: #216869;
  --sas-border-secondary: #001427;
  --sas-card-bg: #001427;
  --sas-card-text: #5da3ff;
  --sas-nav-bg: rgba(33, 104, 105, 0.94);
  --sas-shadow: rgba(0, 20, 39, 0.35);
  --sas-accent: #c2efeb;
  --sas-star: #5da3ff;
  --sas-hero-gradient: linear-gradient(135deg, #216869 0%, #1a5253 50%, #001427 100%);
}

@media (prefers-color-scheme: dark) {
  html[data-theme-mode="auto"] {
    --sas-surface-primary: #216869;
    --sas-surface-secondary: #001427;
    --sas-heading: #c2efeb;
    --sas-text: #5da3ff;
    --sas-border: #216869;
    --sas-border-secondary: #001427;
    --sas-card-bg: #001427;
    --sas-card-text: #5da3ff;
    --sas-nav-bg: rgba(33, 104, 105, 0.94);
    --sas-shadow: rgba(0, 20, 39, 0.35);
    --sas-accent: #c2efeb;
    --sas-star: #5da3ff;
    --sas-hero-gradient: linear-gradient(135deg, #216869 0%, #1a5253 50%, #001427 100%);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--sas-surface-primary);
  color: var(--sas-text);
}

.bg-sas-primary {
  background-color: var(--sas-surface-primary);
}

.bg-sas-secondary {
  background-color: var(--sas-surface-secondary);
}

.bg-sas-card {
  background-color: var(--sas-card-bg);
}

.text-sas-heading {
  color: var(--sas-heading);
}

.text-sas-body {
  color: var(--sas-text);
}

.text-sas-card {
  color: var(--sas-card-text);
}

.text-sas-accent {
  color: var(--sas-accent);
}

.border-sas {
  border-color: var(--sas-border);
}

.border-sas-secondary {
  border-color: var(--sas-border-secondary);
}

.shadow-sas {
  box-shadow: 0 4px 24px var(--sas-shadow);
}

.hero-gradient {
  background: var(--sas-hero-gradient);
}

.nav-blur {
  background-color: var(--sas-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-primary {
  background-color: var(--sas-heading);
  color: var(--sas-surface-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--sas-heading);
  border: 2px solid var(--sas-heading);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--sas-heading);
  color: var(--sas-surface-primary);
}

.card-sas {
  background-color: var(--sas-card-bg);
  color: var(--sas-card-text);
  border: 1px solid var(--sas-border-secondary);
}

.stat-card {
  background-color: var(--sas-surface-secondary);
  color: var(--sas-card-text);
  border: 1px solid var(--sas-border-secondary);
}

.service-icon {
  color: var(--sas-heading);
}

html[data-theme-mode="dark"] .service-icon,
html[data-theme-mode="auto"] .service-icon {
  color: var(--sas-heading);
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.2s ease;
}

.star-rating {
  color: var(--sas-star);
  letter-spacing: 0.05em;
}

.theme-btn.active {
  background-color: var(--sas-heading);
  color: var(--sas-surface-primary);
}

.mobile-menu-open {
  overflow: hidden;
}

#mobile-nav:not(.hidden) {
  animation: slideDown 0.25s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.map-embed iframe {
  border: 0;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: 0.75rem;
}

:focus-visible {
  outline: 2px solid var(--sas-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}