/* ==========================================================================
   Puente Bootstrap 5.3 → tokens propios.
   Permite que las páginas aún no rediseñadas hereden paleta y tipografía.
   Los !important de este fichero son deliberados: sobrescriben utilidades
   de Bootstrap que ya vienen marcadas como !important en su origen.
   ========================================================================== */

:root {
  --bs-body-bg: var(--rm-paper);
  --bs-body-color: var(--rm-ink);
  --bs-body-font-family: var(--rm-font-body);
  --bs-body-font-size: var(--rm-text-base);
  --bs-body-line-height: var(--rm-leading-normal);

  --bs-emphasis-color: var(--rm-ink);
  --bs-secondary-color: var(--rm-ink-muted);
  --bs-tertiary-color: var(--rm-ink-subtle);
  --bs-secondary-bg: var(--rm-surface-sunken);
  --bs-tertiary-bg: var(--rm-surface-sunken);

  --bs-border-color: var(--rm-rule);
  --bs-border-radius: var(--rm-radius-md);
  --bs-border-radius-sm: var(--rm-radius-sm);
  --bs-border-radius-lg: var(--rm-radius-lg);

  --bs-link-color: var(--rm-accent);
  --bs-link-hover-color: var(--rm-accent-hover);
  --bs-link-color-rgb: 26, 76, 139;

  --bs-heading-color: var(--rm-ink);
  --bs-font-monospace: var(--rm-font-mono);

  --bs-primary: var(--rm-accent);
  --bs-primary-rgb: 26, 76, 139;
}

/* Bootstrap necesita el acento descompuesto en canales para sus rgba().
   `var()` no sirve dentro de una lista de canales, así que el acento oscuro
   (#8fb4e3) se declara a mano en los dos casos que cubre tokens.css:
   elección explícita y modo automático del sistema. */
:root[data-theme='dark'] {
  --bs-link-color-rgb: 143, 180, 227;
  --bs-primary-rgb: 143, 180, 227;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bs-link-color-rgb: 143, 180, 227;
    --bs-primary-rgb: 143, 180, 227;
  }
}

/* Las utilidades de color de Bootstrap llevan !important en origen;
   para redirigirlas a nuestros tokens hay que igualar la especificidad. */
.text-muted { color: var(--rm-ink-muted) !important; }
.text-secondary { color: var(--rm-ink-muted) !important; }
.text-white { color: var(--rm-ink) !important; }
.text-light { color: var(--rm-ink) !important; }
.text-dark { color: var(--rm-ink) !important; }
.bg-dark { background-color: var(--rm-surface-sunken) !important; }
.bg-light { background-color: var(--rm-surface-sunken) !important; }
.border-secondary { border-color: var(--rm-rule) !important; }

/* Contenedores algo más estrechos: mejor medida de lectura */
.container, .container-lg, .container-xl {
  max-width: 1180px;
  padding-inline: var(--rm-space-5);
}

/* Foco visible. Bootstrap declara `outline: 0` en .btn y .nav-link con
   especificidad (0,2,0); la regla :where() de base.css vale 0 y pierde.
   Igualamos especificidad para no dejar sin foco visible la navegación
   ni los botones, que es un incumplimiento de WCAG 2.4.7. */
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible {
  outline: 2px solid var(--rm-accent);
  outline-offset: 2px;
  box-shadow: none;
}