/* ============================================================
   03-TYPOGRAPHY.CSS
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--cd-font-heading);
    font-weight: var(--cd-fw-bold);
    line-height: var(--cd-lh-tight);
    color: var(--cd-color-dark);
    letter-spacing: var(--cd-letter-spacing-tight);
    margin: 0 0 var(--cd-space-md);
}

h1 {
    font-family: var(--cd-font-display);
    font-size: var(--cd-fs-h1);
    font-weight: var(--cd-fw-bold);
}

h2 {
    font-family: var(--cd-font-display);
    font-size: var(--cd-fs-h2);
    font-weight: var(--cd-fw-bold);
}

h3 {
    font-size: var(--cd-fs-h3);
}

h4 {
    font-size: var(--cd-fs-h4);
}

h5 {
    font-size: var(--cd-fs-h5);
}

h6 {
    font-size: var(--cd-fs-h6);
}

p {
    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-medium);
    font-size: var(--cd-fs-body);
    line-height: var(--cd-lh-relaxed);
    color: var(--cd-color-text);
    margin: 0 0 var(--cd-space-sm);
}

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

a {
    color: var(--cd-color-link);
    text-decoration: none;
    transition: color var(--cd-transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--cd-color-link-hover);
}

strong,
b {
    font-weight: var(--cd-fw-bold);
    color: var(--cd-color-text);
}

em,
i {
    font-style: italic;
}

small {
    font-size: var(--cd-fs-small);
    color: var(--cd-color-text-muted);
}

ul,
ol {
    padding-left: 1.25em;
}

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

li::marker {
    color: var(--cd-color-primary);
}

blockquote {
    margin: var(--cd-space-lg) 0;
    padding-left: var(--cd-space-md);
    border-left: 4px solid var(--cd-color-primary);

    font-family: var(--cd-font-body);
    font-size: var(--cd-fs-h5);
    line-height: var(--cd-lh-normal);
    font-style: italic;

    color: var(--cd-color-text-muted);
}

hr {
    border: 0;
    border-top: 1px solid var(--cd-color-border);
    margin: var(--cd-space-xl) 0;
}

.cd-display {
    font-family: var(--cd-font-display);
    font-weight: var(--cd-fw-bold);
    line-height: var(--cd-lh-tight);
}

.cd-lead {
    font-size: var(--cd-fs-h4);
    line-height: var(--cd-lh-normal);
    max-width: 55ch;
}

.cd-caption {
    font-size: var(--cd-fs-small);
    color: var(--cd-color-text-muted);
}

.cd-eyebrow {
    display: block;

    margin-bottom: var(--cd-space-xs);

    font-family: var(--cd-font-body);
    font-size: var(--cd-fs-small);
    font-weight: var(--cd-fw-semibold);
    letter-spacing: var(--cd-letter-spacing-wide);
    text-transform: uppercase;

    color: var(--cd-color-primary);
}

.cd-highlight,
.cd-dot {
    color: var(--cd-color-primary);
}