/* Yoga Sutras Guide — custom styles */

:root {
  --color-sand: #f5f0e8;
  --color-sage: #8fa68e;
  --color-sage-dark: #6b8570;
  --color-gold: #c4a962;
  --color-gold-light: #d4bc7a;
  --color-earth: #3d3229;
  --color-earth-light: #5c4f42;
  --color-cream: #faf8f4;
  --color-muted: #7a7268;
}

.dark {
  --color-sand: #2a2520;
  --color-sage: #7a9a7a;
  --color-sage-dark: #5a7a5a;
  --color-gold: #c4a962;
  --color-gold-light: #a89050;
  --color-earth: #e8e0d4;
  --color-earth-light: #c8bfb0;
  --color-cream: #1a1714;
  --color-muted: #a09890;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background-color: var(--color-cream);
  color: var(--color-earth);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.font-sanskrit {
  font-family: 'Noto Sans Devanagari', 'DM Sans', sans-serif;
}

.font-translit {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
}

/* Subtle lotus motif background */
.lotus-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238fa68e' stroke-width='0.5' opacity='0.08'%3E%3Cellipse cx='60' cy='60' rx='8' ry='20' transform='rotate(0 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='8' ry='20' transform='rotate(45 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='8' ry='20' transform='rotate(90 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='8' ry='20' transform='rotate(135 60 60)'/%3E%3Ccircle cx='60' cy='60' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

.dark .lotus-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%237a9a7a' stroke-width='0.5' opacity='0.06'%3E%3Cellipse cx='60' cy='60' rx='8' ry='20' transform='rotate(0 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='8' ry='20' transform='rotate(45 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='8' ry='20' transform='rotate(90 60 60)'/%3E%3Cellipse cx='60' cy='60' rx='8' ry='20' transform='rotate(135 60 60)'/%3E%3Ccircle cx='60' cy='60' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Sutra card hover */
.sutra-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Key sutra highlight */
.key-sutra {
  border-left: 3px solid var(--color-gold);
}

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

/* Search highlight */
.search-highlight {
  background-color: rgba(196, 169, 98, 0.35);
  border-radius: 2px;
  padding: 0 2px;
}

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

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

/* Mobile menu */
.mobile-menu-open {
  max-height: 500px;
  opacity: 1;
}

.mobile-menu-closed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* Bookmark button active state */
.bookmark-active svg {
  fill: var(--color-gold);
  stroke: var(--color-gold);
}

/* Sutra audio */
.sutra-audio-player {
  height: 2.25rem;
  border-radius: 0.5rem;
}