/* ==========================================================================
   TEMA — aquí está TODO lo que define el aspecto (colores, fuentes, medidas).
   Cambia estos valores y todo el sitio cambia. No hace falta tocar style.css.
   ========================================================================== */

:root {
  /* --- Colores base ------------------------------------------------------ */
  --bg:          #0f1419;   /* fondo de la página */
  --surface:     #161c24;   /* fondos secundarios */
  --border:      #242d38;   /* líneas separadoras */
  --text:        #e3dfd6;   /* texto principal */
  --text-muted:  #8b94a1;   /* fechas, resúmenes, textos secundarios */
  --accent:      #7fb7a4;   /* enlaces, foco, detalles */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);

  /* --- Código ------------------------------------------------------------ */
  --code-bg:      #121820;
  --syn-keyword:  #c3a6e8;
  --syn-string:   #9fcf9b;
  --syn-comment:  #6b7785;
  --syn-function: #7fb7e0;
  --syn-number:   #e3b778;

  /* --- Tipografía (sin descargar nada: fuentes del sistema) --------------- */
  --font-body: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  /* --- Medidas ------------------------------------------------------------ */
  --content-width: 42rem;   /* ancho de la columna principal */
  --radius: 6px;
}