/**
 * Wapu UI Kit · wapu-title
 *
 * Heading/título editorial. Reemplaza eventual variedad de tipografías
 * tipo "title_highlight", "title_script", "big_title" del catálogo legacy.
 *
 * Sizes:      --sm, --md (default), --lg, --xl, --display
 * Style:      --default (regular), --editorial (serif italic), --tight (compact)
 *
 * Tokens del drop:
 *   --wapu-title-color  (color · default currentColor)
 *   --wapu-title-font   (font-family · default heading del drop)
 *
 * @package WapuCore
 * @since   5.3.2
 */

.wapu-title {
    font-family: var(--wapu-title-font, inherit);
    font-weight: 600;
    line-height: 1.15;
    color: var(--wapu-title-color, currentColor);
    margin: 0;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* ── Sizes (responsive con clamp) ───────────────────────────────── */
.wapu-title--sm      { font-size: clamp(18px, 2vw + 12px, 22px); }
.wapu-title--md      { font-size: clamp(24px, 3vw + 12px, 32px); }
.wapu-title--lg      { font-size: clamp(32px, 4vw + 16px, 48px); }
.wapu-title--xl      { font-size: clamp(40px, 5vw + 20px, 64px); }
.wapu-title--display { font-size: clamp(56px, 7vw + 24px, 96px); line-height: 1.05; }

/* ── Styles ─────────────────────────────────────────────────────── */
.wapu-title--editorial {
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.02em;
}
.wapu-title--tight {
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* ── Weight modifiers ───────────────────────────────────────────── */
.wapu-title--regular   { font-weight: 400; }
.wapu-title--medium    { font-weight: 500; }
.wapu-title--bold      { font-weight: 700; }

/* ── Highlight (inline accent) ──────────────────────────────────── */
.wapu-title__highlight {
    color: var(--wapu-title-accent, var(--wapu-cta-color, currentColor));
    font-style: italic;
}