/* ============================================================
 * EKIPATE · CSS modular — BASE / utilidades   (realineado en PKG-EK-W1-08)
 * ------------------------------------------------------------
 * Capa base transversal, construida SOLO con tokens --ekp-* del DS.
 * Las FAMILIAS de tipografia de la tienda las fija WoodMart Theme
 * Settings (A.6, reuse-first); aqui van reset de acabado, accesibilidad
 * y las utilidades del sistema de diseno (.eyebrow, .display, .mono).
 * Frontera: aditivo sobre la cadena modular; carga global tras style.css.
 * ============================================================ */

/* -- Tokens de acabado de tarjeta (claras, sobre el cuerpo hueso) --
 * Superficie de tarjeta clara + elevacion sobria (hairline en reposo,
 * sombra de spread negativo al elevar). Complementan la escala de
 * sombras del DS para el registro claro del cuerpo. */
:root {
    --ekp-card: #ffffff;
    --ekp-shadow-card: 0 1px 2px rgba(20, 18, 14, 0.04);
    --ekp-shadow-raise: var(--ekp-shadow-light);
}

/* -- Render de texto e interaccion accesible (transversal) --
 * Foco visible = accesibilidad (WCAG 2.4.7); no altera el layout. */
body {
    text-rendering: optimizeLegibility;
}

:focus-visible {
    outline: 2px solid var(--ekp-focus-ring);
    outline-offset: 2px;
    border-radius: var(--ekp-radius-xs);
}

::selection {
    background: var(--ekp-accent);
    color: var(--ekp-on-dark-1);
}

/* -- Equilibrado de titulares --
 * Las familias y pesos los fija el Theme Settings (Archivo). Aqui solo
 * el balance de linea para evitar viudas en titulares (reuse-first). */
h1,
h2,
h3 {
    text-wrap: balance;
}

/* -- Utilidades del sistema de diseno --
 * Portadas del DS (project/base.css) con tokens --ekp-*. Nombres del DS
 * (sin prefijo) para que las pantallas del bundle sean transplantables;
 * los COMPONENTES del child siguen el namespace .ekp-* (ver CLAUDE.md). */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-sans);
    font-size: var(--ekp-text-xs);
    font-weight: var(--ekp-fw-semibold);
    letter-spacing: var(--ekp-tracking-label);
    text-transform: uppercase;
    color: var(--ekp-accent);
}
.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
}

.display {
    font-family: var(--font-display);
    font-weight: var(--ekp-fw-extrabold);
    line-height: var(--ekp-leading-tight);
    letter-spacing: var(--ekp-tracking-tight);
}

.mono {
    font-family: var(--font-mono);
    letter-spacing: var(--ekp-tracking-mono);
    font-feature-settings: "tnum" 1;
}

/* -- Hairlines y separadores (no cajas con sombra) --
 * La separacion se hace con lineas finas sobre --ekp-line (claro) /
 * --ekp-hairline (oscuro), no con marcos. */
.ekp-rule {
    border: 0;
    border-top: 1px solid var(--ekp-line);
    margin-block: var(--space-lg);
}

.ekp-rule--on-dark {
    border-top-color: var(--ekp-hairline);
}