/* ============================================================
   DR. ALEJANDRO ALBORNOZ — Design Tokens (Editorial edition)
   Paleta del feed IG real + logo oficial.
   ============================================================ */

:root {
  /* ---------- FONDOS DARK (azul marino del feed IG) ---------- */
  --navy-950:       #08202C;
  --navy-900:       #0F2A38;
  --navy-800:       #153547;
  --navy-700:       #1A3F52;
  --navy-600:       #1F4A5F;
  --navy-500:       #24556E;

  /* ---------- CREMA / BEIGE (fondo del logo circular) ---------- */
  --cream-50:       #FBF8F1;
  --cream-100:      #F5F0E4;
  --cream-200:      #F1EBDE;
  --cream-300:      #E8E0D0;
  --cream-400:      #D6CCB7;
  --cream-500:      #B9AE93;

  /* ---------- TURQUESA / MENTA (acento del feed) ---------- */
  --mint-100:       #D4EDF2;
  --mint-200:       #B8E2E9;
  --mint-300:       #9DD4DD;
  --mint-400:       #7FC1CC;
  --mint-500:       #5FA8B4;
  --mint-600:       #3E8693;

  /* ---------- SEMÁNTICO GENERAL ---------- */
  --bg-dark:        var(--navy-900);
  --bg-dark-alt:    var(--navy-800);
  --bg-dark-elevated: var(--navy-700);
  --bg-light:       var(--cream-200);
  --bg-light-alt:   var(--cream-100);

  --text-on-dark:   var(--cream-100);
  --text-on-dark-muted: rgba(245, 240, 228, 0.72);
  --text-on-dark-subtle: rgba(245, 240, 228, 0.45);

  --text-on-light:  var(--navy-900);
  --text-on-light-muted: rgba(15, 42, 56, 0.70);
  --text-on-light-subtle: rgba(15, 42, 56, 0.45);

  --accent:         var(--mint-400);
  --accent-hover:   var(--mint-300);
  --accent-deep:    var(--mint-600);

  --divider-dark:   rgba(212, 237, 242, 0.12);
  --divider-light:  rgba(15, 42, 56, 0.14);

  /* ---------- WHATSAPP (CTA verde) ---------- */
  --wa-green:       #25D366;
  --wa-green-dark:  #128C7E;
  --wa-bg:          #0B141A;
  --wa-bubble-out:  #005C4B;
  --wa-bubble-in:   #202C33;
  --wa-header:      #202C33;
  --wa-text:        #E9EDEF;
  --wa-text-secondary: #8696A0;

  /* Aliases de compatibilidad para el modal WhatsApp */
  --gold:           var(--mint-300);
  --gold-light:     var(--mint-200);
  --gold-dark:      var(--mint-500);
  --gold-glow:      rgba(157, 212, 221, 0.22);
  --bg-primary:     var(--navy-900);
  --bg-secondary:   var(--navy-800);
  --bg-elevated:    var(--navy-700);
  --bg-surface:     var(--navy-600);
  --white:          var(--cream-100);
  --white-muted:    rgba(245, 240, 228, 0.72);
  --text-secondary: rgba(245, 240, 228, 0.64);
  --text-tertiary:  rgba(245, 240, 228, 0.42);
  --divider:        var(--divider-dark);

  /* ---------- TIPOGRAFÍA ---------- */
  --font-display:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-serif:     'Cormorant Garamond', Georgia, serif;
  --font-heading:   'Inter', -apple-system, system-ui, sans-serif;
  --font-script:    'Caveat', cursive;
  --font-body:      'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Escala de tamaños */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.875rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.5rem;
  --fs-4xl:  5rem;
  --fs-5xl:  7.5rem;
  --fs-6xl:  10rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.05em;
  --ls-wider:  0.14em;
  --ls-widest: 0.28em;

  /* Espaciado (base 4) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;
  --space-24: 12rem;

  /* Radios */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   28px;
  --radius-pill: 9999px;

  /* Sombras */
  --shadow-sm:  0 1px 2px rgba(8, 32, 44, 0.08);
  --shadow-md:  0 6px 20px rgba(8, 32, 44, 0.12);
  --shadow-lg:  0 20px 50px rgba(8, 32, 44, 0.18);
  --shadow-mint: 0 10px 32px rgba(127, 193, 204, 0.28);
  --shadow-cta: 0 12px 30px rgba(37, 211, 102, 0.25);

  /* Transiciones */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --dur-fast:    0.18s;
  --dur-normal:  0.32s;
  --dur-slow:    0.6s;

  /* Contenedores */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;

  /* Z-index */
  --z-sticky: 100;
  --z-modal:  1000;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}