/* Mangalasutra - Heritage Editorial Custom CSS */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  --color-surface: #fcf9f8;
  --color-on-surface: #1b1c1c;
  --color-on-surface-variant: #514439;
  --color-primary: #855315;
  --color-primary-container: #d49653;
  --color-onyx-warm: #2c2c2c;
  --color-midnight-roast: #211b0f;
  --color-secondary-fixed: #eee1cd;
  --color-outline: rgba(44, 44, 44, 0.15);
}

body {
  font-family: 'Manrope', sans-serif;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Typography Custom Classes */
.font-serif-hero {
  font-family: 'Playfair Display', serif;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.font-serif-headline {
  font-family: 'Playfair Display', serif;
}

/* Hairline Borders */
.hairline-b { border-bottom: 1px solid var(--color-outline); }
.hairline-t { border-top: 1px solid var(--color-outline); }
.hairline-r { border-right: 1px solid var(--color-outline); }
.hairline-l { border-left: 1px solid var(--color-outline); }

/* Custom Backgrounds */
.bg-midnight {
  background-color: var(--color-midnight-roast);
  color: var(--color-secondary-fixed);
}

.bg-parchment {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

/* Image Wash Overlay */
.image-wash {
  position: relative;
}
.image-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.image-wash:hover::after {
  opacity: 0.05;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #211b0f;
}
::-webkit-scrollbar-thumb {
  background: #d49653;
  border-radius: 4px;
}

/* Pulse Glow Animation */
@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(212, 150, 83, 0.2); }
  50% { box-shadow: 0 0 30px rgba(212, 150, 83, 0.5); }
}

.gold-glow {
  animation: goldGlow 3s infinite ease-in-out;
}

/* Modal Glassmorphism */
.modal-backdrop {
  background: rgba(15, 12, 8, 0.85);
  backdrop-filter: blur(8px);
}

/* Smooth Tab Transitions */
.tab-btn.active {
  color: #d49653;
  border-bottom: 2px solid #d49653;
}