/* ─── Typography ──────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: var(--leading-tight);
    color: var(--jj-charcoal);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); font-weight: 600; }
h6 { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* Display heading */
.jj-display {
    font-size: var(--text-display);
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Section titles */
.jj-section-title {
    font-size: var(--text-2xl);
    font-family: var(--font-heading);
    text-align: center;
    margin-bottom: var(--space-lg);
    position: relative;
}

.jj-section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--jj-mauve);
    margin: var(--space-md) auto 0;
}

.jj-section-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--jj-charcoal-light);
    text-align: center;
    max-width: 500px;
    margin: 0 auto var(--space-2xl);
}

/* Accent text */
.jj-accent {
    font-family: var(--font-accent);
    font-style: italic;
}

/* Body text */
p {
    margin-bottom: var(--space-md);
    line-height: var(--leading-normal);
}

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

/* Small text */
small, .jj-small {
    font-size: var(--text-sm);
    color: var(--jj-charcoal-light);
}

.jj-xs {
    font-size: var(--text-xs);
    color: var(--jj-charcoal-lighter);
}

/* Links with underline animation */
.jj-link {
    position: relative;
    display: inline;
    color: var(--jj-mauve-dark);
}

.jj-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--jj-mauve-dark);
    transition: width var(--duration-base) var(--ease-out);
}

.jj-link:hover::after {
    width: 100%;
}

/* Label / overline */
.jj-label {
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--jj-mauve);
}

/* Blockquote */
blockquote {
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--jj-charcoal-light);
    border-left: 3px solid var(--jj-rose);
    padding-left: var(--space-lg);
    margin: var(--space-xl) 0;
}

/* Separator */
hr {
    border: none;
    height: 1px;
    background: var(--jj-rose-light);
    margin: var(--space-xl) 0;
}

/* Price styles */
.jj-price {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--jj-charcoal);
}

.jj-price--sale {
    color: var(--jj-error);
}

.jj-price--original {
    text-decoration: line-through;
    color: var(--jj-charcoal-lighter);
    font-weight: 400;
}