/* ==========================================================================
   VigorAndino — Revista de Divulgación Botánica y Bienestar Masculino
   Estilos globales y componentes interactivos
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --forest: #24483B;
  --forest-dark: #19332A;
  --forest-light: #2E5B4B;
  --sage: #A7B7A0;
  --sage-light: #C5D1C0;
  --sage-dark: #85987D;
  --sand: #F1E8D8;
  --sand-light: #F8F4ED;
  --sand-dark: #E2D5BF;
  --sand-card: #F5EFE4;
  --ivory: #FBFAF6;
  --copper: #B8754D;
  --copper-hover: #9E5F38;
  --copper-light: #F2DFD4;
  --graphite: #303833;
  --graphite-muted: #69766F;
  --light-green: #E5EDE4;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body,
body.bg-ivory {
  position: relative;
  min-height: 100vh;
  color: var(--graphite);
  font-family: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background-color: #FFFFFF !important;
  /* Multi-layered gradient: Pure crisp white at top transitioning into lush Andean botanical green */
  background-image:
    /* Layer 1: Ambient botanical light orbs and depth accents */
    radial-gradient(1100px circle at 85% 8%, rgba(180, 220, 175, 0.40), transparent 60%),
    radial-gradient(900px circle at 10% 24%, rgba(145, 195, 145, 0.35), transparent 55%),
    radial-gradient(1100px circle at 90% 50%, rgba(115, 180, 125, 0.32), transparent 55%),
    radial-gradient(950px circle at 12% 76%, rgba(75, 145, 95, 0.28), transparent 60%),
    radial-gradient(1200px circle at 80% 96%, rgba(36, 72, 59, 0.35), transparent 60%),
    /* Layer 2: Subtle organic paper-dot texture overlay for editorial magazine richness */
    radial-gradient(rgba(36, 72, 59, 0.055) 1px, transparent 1px),
    /* Layer 3: Vertical White-to-Green Transition */
    linear-gradient(180deg, 
      #FFFFFF 0%, 
      #FFFFFF 4%,
      #F4F9F2 12%, 
      #E4F2E1 24%, 
      #D0EAD0 40%, 
      #B9E0B7 58%, 
      #9ECC99 76%, 
      #84B981 90%, 
      #6CA668 100%
    ) !important;
  background-size: 
    auto, 
    auto, 
    auto, 
    auto, 
    auto, 
    26px 26px, 
    100% 100% !important;
  background-repeat: 
    no-repeat, 
    no-repeat, 
    no-repeat, 
    no-repeat, 
    no-repeat, 
    repeat, 
    no-repeat !important;
}

h1, h2, h3, h4, .font-serif {
  font-family: 'DM Serif Display', 'Lora', Georgia, serif;
  letter-spacing: -0.01em;
}

/* Accessible focus visible */
*:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

/* Card hover and subtle borders */
.editorial-border {
  border: 1px solid rgba(167, 183, 160, 0.35);
}

.editorial-card {
  background-color: var(--ivory);
  border: 1px solid rgba(167, 183, 160, 0.3);
  transition: all 0.25s ease;
}

.editorial-card:hover {
  border-color: rgba(36, 72, 59, 0.4);
  box-shadow: 0 10px 25px -5px rgba(36, 72, 59, 0.08);
}

/* Breathing animation helpers */
@keyframes breatheScaleIn {
  0% { transform: scale(1); }
  50% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.breathe-inhale {
  transform: scale(1.25);
  transition: transform 4s ease-out;
}

.breathe-hold {
  transform: scale(1.25);
  transition: transform 1s ease;
}

.breathe-exhale {
  transform: scale(0.95);
  transition: transform 6s ease-in-out;
}

/* Modal backdrop animation */
.modal-overlay {
  transition: opacity 0.25s ease-in-out;
}

.modal-content {
  transition: transform 0.25s ease-out;
}

/* Custom scrollbar for modals and TOC */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--sand-light);
}
::-webkit-scrollbar-thumb {
  background: var(--sage);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--forest);
}