/* ============================================================
   Tema NOCTURNO — editorial oscuro · oro sobre tinta
   Se carga DESPUÉS de styles.css y sections.css (gana por orden).
   ============================================================ */

:root {
  /* Fondos — tinta cálida profunda */
  --cream:        oklch(0.205 0.013 52);
  --cream-2:      oklch(0.238 0.015 54);
  --paper:        oklch(0.262 0.017 56);
  --sand:         oklch(0.400 0.018 60);
  --sand-deep:    oklch(0.500 0.020 62);

  /* Texto claro */
  --ink:          oklch(0.930 0.014 82);
  --ink-soft:     oklch(0.800 0.018 80);
  --ink-faint:    oklch(0.660 0.020 78);

  /* Acento — oro */
  --terra:        oklch(0.805 0.095 78);
  --terra-deep:   oklch(0.725 0.100 74);

  /* Compra — esmeralda luminosa */
  --buy:          oklch(0.660 0.105 168);
  --buy-deep:     oklch(0.580 0.100 170);
  --buy-glow:     oklch(0.660 0.105 168 / 0.32);

  --radius: 2px;
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.40), 0 6px 18px oklch(0 0 0 / 0.34);
  --shadow-md: 0 8px 26px oklch(0 0 0 / 0.50), 0 24px 56px oklch(0 0 0 / 0.40);
  --shadow-lg: 0 34px 80px oklch(0 0 0 / 0.62);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Jost", system-ui, -apple-system, sans-serif;
}

body { background: var(--cream); }

/* Navegación */
.nav--solid { background: oklch(0.205 0.013 52 / 0.86); box-shadow: 0 1px 0 var(--sand); }
.nav__brand span { color: var(--terra); }

/* Hero — acentos dorados */
.hero__eyebrow { color: var(--terra); }
.hero__tagline { color: oklch(0.93 0.04 82); }
.hero__scroll { color: oklch(0.86 0.06 80); }

/* Botones — contorno editorial en versalitas */
.btn { letter-spacing: 0.10em; text-transform: uppercase; font-size: 0.80rem; font-weight: 600; }
.btn--buy { letter-spacing: 0.07em; font-size: 0.84rem; }
.btn--ghost:hover { border-color: var(--terra); color: var(--terra); background: oklch(0.805 0.095 78 / 0.06); }

/* Filo dorado superior en las tarjetas de blog */
.blog-card { background: var(--paper); border-color: var(--sand); border-top: 2px solid oklch(0.805 0.095 78 / 0.5); }
.blog-card:hover { border-color: var(--terra); border-top-color: var(--terra); }

/* Cerrar modal en oscuro */
.modal__close { background: oklch(0.262 0.017 56 / 0.92); border-color: var(--sand); color: var(--ink); }
.modal__close:hover { background: var(--sand); color: oklch(0.18 0.012 52); }

/* Botón social — hover oro */
.social-btn { border-color: var(--sand-deep); }
.social-btn:hover { border-color: var(--terra); color: var(--terra); }

/* Selector de diseño flotante */
.design-switch:hover { color: var(--terra); border-color: var(--terra); }