/* ==========================================================================
   BASE (TIPOGRAFÍA Y ELEMENTOS HTML)
   --------------------------------------------------------------------------
   Estilos de etiquetas sueltas: body, títulos, párrafos, enlaces, listas,
   citas, código, tablas... Fuentes y colores vienen de variables.css.
   ========================================================================== */

body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-body);
	color: var(--color-text);
	background-color: var(--color-bg);
}

/* ---------- Títulos ----------
   Para cambiar el tamaño de un nivel concreto, cambia su variable --fs-* */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
	color: var(--color-heading);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5,
h6 { font-size: var(--fs-base); }

/* ---------- Texto ---------- */
small {
	font-size: var(--fs-sm);
}

strong,
b {
	font-weight: var(--font-weight-bold);
}

/* ---------- Enlaces ---------- */
a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--transition);
}

a:hover {
	color: var(--color-primary-hover);
}

/* Foco visible para navegación con teclado (no lo quites: accesibilidad) */
:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* ---------- Citas ---------- */
blockquote {
	padding-left: var(--space-4);
	border-left: 4px solid var(--color-primary);
	color: var(--color-text-muted);
	font-style: italic;
}

/* ---------- Código ---------- */
code,
kbd,
pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.1em 0.35em;
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-sm);
}

pre {
	padding: var(--space-4);
	overflow-x: auto;
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
}

pre code {
	padding: 0;
	background: none;
}

/* ---------- Separador ---------- */
hr {
	border: 0;
	border-top: 1px solid var(--color-border);
}

/* ---------- Tablas ---------- */
th,
td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

th {
	font-weight: var(--font-weight-bold);
	background-color: var(--color-bg-alt);
}

/* ---------- Pies de imagen ---------- */
figcaption,
.wp-caption-text {
	margin-top: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	text-align: center;
}

/* ---------- Selección de texto ---------- */
::selection {
	background-color: var(--color-primary);
	color: var(--color-primary-contrast);
}