/* Gita Guide — custom styles beyond Tailwind */

:root {
  --color-sand: #faf7f2;
  --color-sand-dark: #f0ebe3;
  --color-earth: #3d3429;
  --color-earth-muted: #6b5e4f;
  --color-sage: #6b7f6a;
  --color-sage-light: #8fa38e;
  --color-gold: #b8956a;
  --color-gold-soft: #d4bc94;
}

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "kern" 1, "liga" 1;
}

.font-devanagari {
  font-family: "Noto Sans Devanagari", "Noto Serif Devanagari", sans-serif;
  line-height: 1.8;
}

.font-display {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* Subtle lotus/mandala motif */
.motif-bg {
  background-image: radial-gradient(circle at 20% 80%, rgba(107, 127, 106, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(184, 149, 106, 0.05) 0%, transparent 45%);
}

.dark .motif-bg {
  background-image: radial-gradient(circle at 20% 80%, rgba(107, 127, 106, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(196, 165, 116, 0.06) 0%, transparent 45%);
}

.verse-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.verse-card:hover {
  transform: translateY(-1px);
}

.chapter-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-sage);
  color: white;
  border-radius: 0.375rem;
}

.skip-link:focus {
  top: 1rem;
}

/* Search highlight */
mark.search-hit {
  background: rgba(184, 149, 106, 0.35);
  border-radius: 2px;
  padding: 0 2px;
}

.dark mark.search-hit {
  background: rgba(196, 165, 116, 0.35);
}

/* Progress bar */
.progress-bar {
  transition: width 0.4s ease;
}

/* Timeline connector */
.timeline-line::before {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 2rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-sage-light), transparent);
}

.dark .timeline-line::before {
  background: linear-gradient(to bottom, rgba(143, 163, 142, 0.5), transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .verse-card,
  .chapter-card,
  .progress-bar {
    transition: none;
  }
}