/* Tema Docsify que reutiliza los tokens públicos del RealSquareBlock Design System
   (https://design.realsquareblock.club/) — la misma paleta/tipografía/espaciado que usan
   PleniaPH, PleniaRenova y el resto de la suite.
   Se importan solo los archivos de tokens (custom properties + @font-face), nunca tokens/base.css:
   ese archivo trae resets de elemento (body, a, etc.) pensados para una app completa y pisaría los
   estilos propios de Docsify. Docsify 5 deriva automáticamente el resto de su paleta (code, kbd,
   blockquote, tablas...) a partir de --color-bg/--color-text/--theme-color vía color-mix(), así que
   no hace falta remapear variable por variable.
   Solo tokens por ahora: los componentes rsb-* (Lit) no tienen un bundle público para consumirse
   fuera de Storybook, así que no se usan aquí todavía. */

@import url('https://design.realsquareblock.club/tokens/fonts.css');
@import url('https://design.realsquareblock.club/tokens/colors.css');
@import url('https://design.realsquareblock.club/tokens/typography.css');
@import url('https://design.realsquareblock.club/tokens/spacing.css');
@import url('https://design.realsquareblock.club/tokens/shape.css');
@import url('https://design.realsquareblock.club/tokens/elevation.css');
@import url('https://design.realsquareblock.club/tokens/motion.css');

:root {
  /* Color base — Docsify deriva el resto (code, blockquote, tablas, kbd...) de estas tres */
  --color-bg: var(--surface-page);
  --color-text: var(--text-primary);
  --theme-color: var(--action-primary-bg);

  /* Tipografía */
  --font-family: var(--font-core);
  --font-family-mono: var(--font-mono);
  --font-size: var(--body-md-size);
  --font-weight: var(--weight-regular);
  --heading-font-weight: var(--weight-semibold);
  --strong-font-weight: var(--weight-semibold);

  /* Forma */
  --border-radius: var(--radius-md);
  --border-color: var(--border-subtle);

  /* Enlaces */
  --link-color: var(--text-link);
  --link-color-hover: var(--text-link-hover);
  --link-underline-color: var(--text-link);
  --link-underline-color-hover: var(--text-link-hover);

  /* Botones y campos de formulario (buscador) */
  --button-bg: var(--action-primary-bg);
  --button-color: var(--action-primary-text);
  --form-element-bg: var(--surface-card);
  --form-element-border-color: var(--border-default);
  --form-element-border-radius: var(--radius-control);

  /* Barra lateral: mismo tratamiento de navegación oscura que usan las apps de la suite */
  --sidebar-bg: var(--surface-nav);
  --sidebar-color: var(--text-on-nav);
  --sidebar-border-color: var(--border-nav);
  --sidebar-link-color: var(--text-on-nav);
  --sidebar-link-color-active: var(--rsb-blue-300);
  --sidebar-name-color: var(--text-inverse);
  --sidebar-name-font-family: var(--font-core);
  --sidebar-group-title-color: var(--rsb-gray-400);
  --sidebar-toggle-bg: var(--surface-nav-hover);
  --sidebar-toggle-color: var(--text-on-nav);
  --sidebar-toggle-color-hover: var(--text-inverse);

  /* Barra superior */
  --navbar-link-color: var(--text-secondary);
  --navbar-link-color-active: var(--action-primary-bg);
}