/* =================================================================
   BOOK LANDING · BASE STYLES (scoped)
   ──────────────────────────────────────────────────────────────────
   Aplica los tokens tipográficos a los elementos base. Aquí establece-
   mos la "voz visual" del proyecto. Todo scoped bajo .book-landing.

   Buenas prácticas senior:
   - NO estilar componentes aquí (botones, cards, etc. van en
     components.css). Aquí solo la base elemental.
   - NO usar !important (es síntoma de guerra de especificidad).
   - Usar unidades relativas (rem) para que escale con el usuario.
   ================================================================= */

.book-landing {
  font-family: var(--bl-font-body);
  font-size: var(--bl-text-base);
  font-weight: var(--bl-weight-regular);
  line-height: var(--bl-leading-normal);
  color: var(--bl-color-text);
  background-color: var(--bl-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Headings ────────────────────────────────────────────────── */
.book-landing h1,
.book-landing h2,
.book-landing h3,
.book-landing h4,
.book-landing h5,
.book-landing h6 {
  font-family: var(--bl-font-display);
  color: var(--bl-color-text-heading);
  line-height: var(--bl-leading-tight);
  letter-spacing: var(--bl-tracking-tight);
  font-weight: var(--bl-weight-extrabold);
}

.book-landing h1 { font-size: var(--bl-text-4xl); }
.book-landing h2 { font-size: var(--bl-text-3xl); }
.book-landing h3 { font-size: var(--bl-text-2xl); }
.book-landing h4 { font-size: var(--bl-text-xl); }
.book-landing h5 { font-size: var(--bl-text-lg); }
.book-landing h6 { font-size: var(--bl-text-md); }

/* ── Párrafos ────────────────────────────────────────────────── */
.book-landing p {
  line-height: var(--bl-leading-normal);
}

/* ── Helpers de tipografía ──────────────────────────────────── */

/* Texto consciente del silencio visual (gray-500) */
.book-landing .bl-text-muted {
  color: var(--bl-color-text-muted);
}

/* Eyebrow / kicker — pequeño texto encima de un título */
.book-landing .bl-eyebrow {
  font-size: var(--bl-text-sm);
  font-weight: var(--bl-weight-semibold);
  letter-spacing: var(--bl-tracking-uppercase);
  text-transform: uppercase;
  color: var(--bl-color-primary);
}

/* ── Selección de texto ─────────────────────────────────────── */
.book-landing ::selection {
  background: rgba(0, 113, 220, 0.18);
  color: var(--bl-blue-900);
}

/* ── Focus visible (accesibilidad por teclado) ──────────────── */
.book-landing :focus-visible {
  outline: 2px solid var(--bl-color-primary);
  outline-offset: 2px;
  border-radius: var(--bl-radius-sm);
}

/* ── Scroll suave (solo si el usuario no pidió reducir motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .book-landing {
    scroll-behavior: smooth;
  }
}