/* ============================================
   Sobani Docs — Custom Styles
   ============================================ */

/* --- Base --- */
html { scroll-behavior: smooth; }

/* --- FAQ --- */
details summary { cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.2s ease; }

/* ============================================
   Design Tokens & Cards
   ============================================ */

/* --- Design Tokens --- */
:root {
  --warm-bg: #fffbf5;
  --warm-bg-alt: #fef7ed;
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(0, 0, 0, 0.08);
  --accent-glow: rgba(217, 119, 6, 0.3);
}

.dark {
  --warm-bg: #0f172a;
  --warm-bg-alt: rgba(30, 41, 59, 0.5);
  --glass-bg: rgba(51, 65, 85, 0.6);
  --glass-border: rgba(255, 255, 255, 0.12);
  --accent-glow: rgba(251, 191, 36, 0.2);
}

/* --- Glass Card (no backdrop-filter for performance) --- */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease;
}

.glass-card:hover {
  transform: translateY(-2px);
}

/* --- Hero Gradient --- */
.hero-gradient {
  background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 50%, #fffbf5 100%);
}
.dark .hero-gradient {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* --- Primary Button --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 6px 20px var(--accent-glow);
  transform: translateY(-2px) scale(1.02);
}

/* --- Header Glass (lighter blur for scroll perf) --- */
.header-glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .header-glass {
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Section Divider --- */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  border: none;
}
.dark .section-divider {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* --- Hero Title Gradient --- */
.hero-title-gradient {
  background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dark .hero-title-gradient {
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   Scroll Animations
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
  }
  .animate-fade-in-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}