:root {
  --bg: #fdfdfc;
  --fg: #1b1b1a;
  --muted: #5f5f5c;
  --accent: #1a5fb4;
  --border: #e2e2df;
  --code-bg: #f4f4f1;
  --code-keyword: #1a5fb4;
  --code-string: #8a6d1f;
  --code-function: #6a3d9a;
  --code-comment: #5f5f5c;
  --code-punctuation: #8a8a85;
}

/* La paleta oscura se declara dos veces a propósito: bajo el media query
   para quien no ha elegido nada (el estado "sistema"), y bajo el atributo
   data-theme para cuando el conmutador fija una preferencia explícita. El
   media query se excluye si hay tema claro forzado, de modo que el botón
   gane a la preferencia del sistema en ambos sentidos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161715;
    --fg: #e8e8e4;
    --muted: #a2a29c;
    --accent: #8ab4f8;
    --border: #2e302d;
    --code-bg: #1f211e;
    --code-keyword: #8ab4f8;
    --code-string: #d4b25f;
    --code-function: #c8a2e0;
    --code-comment: #a2a29c;
    --code-punctuation: #7a7d78;
  }
}

:root[data-theme="dark"] {
  --bg: #161715;
  --fg: #e8e8e4;
  --muted: #a2a29c;
  --accent: #8ab4f8;
  --border: #2e302d;
  --code-bg: #1f211e;
  --code-keyword: #8ab4f8;
  --code-string: #d4b25f;
  --code-function: #c8a2e0;
  --code-comment: #a2a29c;
  --code-punctuation: #7a7d78;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1.25rem;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
}

/* El ancho se fija en rem, no en ch: `ch` depende del tamaño de fuente
   del propio elemento, y el pie usa una fuente menor, lo que le daba un
   ancho distinto al del resto de la página. */
.site-header,
main {
  max-width: 47rem;
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 2rem 1rem;
}

.site-links {
  display: flex;
  gap: 0.9rem;
  margin-left: 0.4rem;
}

.site-links a {
  display: inline-flex;
  color: var(--muted);
  line-height: 0;
}

.site-links a:hover,
.site-links a:focus-visible {
  color: var(--accent);
}

/* La portada usa el h1 para presentar el sitio, no para repetir su
   nombre. Lleva el color del texto y una línea inferior para separarse del
   listado: como gris atenuado se confundía con un párrafo cualquiera. */
.site-intro {
  max-width: 46ch;
  margin-block: 1.25rem 0;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.45;
  text-wrap: pretty;
}

.site-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--fg);
  text-decoration: none;
}

h1,
h2,
h3 {
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  margin-block: 0 0.5rem;
}

a {
  color: var(--accent);
}

img {
  max-width: 100%;
  height: auto;
}

pre {
  padding: 1rem;
  overflow-x: auto;
  background: var(--code-bg);
  border-radius: 6px;
  font-size: 0.9rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

:not(pre) > code {
  padding: 0.15em 0.35em;
  background: var(--code-bg);
  border-radius: 4px;
  font-size: 0.9em;
}

/* La cita se marca con una barra lateral en el color de acento y un
   fondo apenas perceptible (el mismo del código), suficiente para
   separarla del texto sin romper el gris del cuerpo. El último párrafo
   pierde el margen inferior para que la caja no quede descompensada. */
blockquote {
  margin-inline: 0;
  margin-block: 1.75rem;
  padding: 0.85rem 1.25rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: var(--code-bg);
  color: var(--muted);
  font-style: italic;
}

blockquote > :first-child {
  margin-top: 0;
}

blockquote > :last-child {
  margin-bottom: 0;
}

/* Una cita puede citar a su vez; la anidada se distingue por el borde
   atenuado, no por otro fondo que se iría oscureciendo. */
blockquote blockquote {
  border-left-color: var(--border);
  background: none;
}

/* La atribución vuelve a redonda y se alinea a la derecha para leerse
   como firma. En Markdown el <cite> queda envuelto en su propio párrafo,
   así que la separación ya la da el margen de ese párrafo: añadir aquí un
   margen superior sumaría dos huecos. */
blockquote cite,
blockquote footer {
  display: block;
  font-size: 0.85em;
  font-style: normal;
  text-align: right;
}

.post-list {
  list-style: none;
  padding: 0;
}

.post-list li {
  margin-block: 2rem;
}

.site-intro + .post-list {
  margin-top: 0.5rem;
}

.post-list a {
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
}

.post-list a:hover {
  text-decoration: underline;
}

.post-list p {
  margin-block: 0.35rem 0;
  color: var(--muted);
}

.post-list time,
.post-meta {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.post-meta {
  margin-block: 0 2rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 3rem;
  padding: 0;
  list-style: none;
}

.tag-list a {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
}

/* El conmutador muestra el icono del tema que se activaría al pulsarlo.
   Los tres estados (sistema, claro, oscuro) se cubren combinando el media
   query con el atributo, igual que la paleta. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 0.3rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--accent);
}

/* El cambio de color no basta como señal de foco para quien navega con
   teclado; el contorno lo hace explícito. */
.theme-toggle:focus-visible,
.site-links a:focus-visible,
.site-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Por defecto (claro): se ofrece pasar a oscuro. */
.theme-toggle .icon-sol {
  display: none;
}

.theme-toggle .icon-luna {
  display: block;
}

/* En oscuro, por sistema o forzado, se ofrece volver a claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-luna {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-sol {
    display: block;
  }
}

:root[data-theme="dark"] .theme-toggle .icon-luna {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sol {
  display: block;
}

/* Tema claro forzado sobre un sistema oscuro. */
:root[data-theme="light"] .theme-toggle .icon-sol {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-luna {
  display: block;
}

/* En la cabecera, el nombre pesa más que la sección para que el enlace
   se lea como "autor / blog" y no como un título de dos palabras. */
.site-title-author {
  font-weight: 600;
  color: var(--fg);
}

.site-title-sep,
.site-title-name {
  color: var(--muted);
  font-weight: 400;
}

/* Resaltado de sintaxis (Prism). Los nombres de token los genera
   @11ty/eleventy-plugin-syntaxhighlight; se agrupan por familia. */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--code-comment);
  font-style: italic;
}

.token.punctuation,
.token.operator {
  color: var(--code-punctuation);
}

.token.keyword,
.token.tag,
.token.selector,
.token.important,
.token.atrule {
  color: var(--code-keyword);
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.template-string {
  color: var(--code-string);
}

.token.function,
.token.class-name,
.token.attr-name,
.token.property {
  color: var(--code-function);
}

.token.number,
.token.boolean,
.token.constant,
.token.symbol {
  color: var(--code-string);
}

.token.parameter,
.token.variable {
  color: inherit;
}

/* La interpolación reutiliza el color del código circundante, no el de
   la cadena que la contiene. */
.token.interpolation {
  color: var(--code-fg, inherit);
}

.token.interpolation-punctuation {
  color: var(--code-punctuation);
}

.token.bold {
  font-weight: 600;
}

.token.italic {
  font-style: italic;
}