/* =========================================================================
   BASE.CSS — Tipografía y estilos base de contenido.
   Consume tokens definidos en style.css. No redefine custom properties.
   ========================================================================= */

/* ── Tipografía base ───────────────────────────────── */
body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-neutral-800);
    background-color: var(--surface-primary);
}

/* ── Párrafos ──────────────────────────────────────── */
p {
    margin-bottom: var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

/* ── Encabezados ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-black);
    line-height: 1.15;
    color: var(--color-neutral-900);
    margin-bottom: var(--space-4);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* ── Listas ────────────────────────────────────────── */
ul,
ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

li {
    margin-bottom: var(--space-2);
}

/* ── Citas ─────────────────────────────────────────── */
blockquote {
    border-left: 4px solid var(--color-primary-300);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-6) 0;
    background-color: var(--surface-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

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

/* ── Código ────────────────────────────────────────── */
code,
pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--text-sm);
    background-color: var(--surface-secondary);
    border-radius: var(--radius-sm);
}

code {
    padding: 0.125em 0.375em;
}

pre {
    padding: var(--space-4);
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

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

/* ── Separador ─────────────────────────────────────── */
hr {
    border: none;
    height: 1px;
    background-color: var(--color-neutral-200);
    margin: var(--space-8) 0;
}

/* ── Tablas ────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-4);
}

th {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface-secondary);
    border-bottom: 2px solid var(--color-neutral-300);
}

td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-neutral-200);
}