/* ============================================================
   BASE: TYPOGRAPHY
   Base typography styles
   ============================================================ */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--ds-font-weight-semibold);
    line-height: var(--ds-line-height-tight);
    margin-bottom: var(--ds-space-4);
    color: var(--ds-text-primary);
}

h1 {
    font-size: var(--ds-font-size-4xl);
}

h2 {
    font-size: var(--ds-font-size-3xl);
}

h3 {
    font-size: var(--ds-font-size-2xl);
}

h4 {
    font-size: var(--ds-font-size-xl);
}

h5 {
    font-size: var(--ds-font-size-lg);
}

h6 {
    font-size: var(--ds-font-size-base);
}

/* Paragraphs */
p {
    margin-bottom: var(--ds-space-4);
}

/* Links */
a {
    color: var(--ds-link-color);
    text-decoration: none;
    transition: var(--ds-transition-color);
    text-decoration-skip-ink: auto;
}

a:hover {
    color: var(--ds-link-hover);
    text-decoration: underline;
    /* slightly offset and thicker underline for better affordance */
    text-underline-offset: 0.12rem;
    text-decoration-thickness: 2px;
}

a:active {
    color: var(--ds-link-active);
}

/* Accessible focus state for keyboard users */
a:focus-visible {
    outline: none;
    box-shadow: var(--ds-focus-ring);
    border-radius: 2px;
}

/* Plain-anchor affordance: underline on hover, do not affect buttons
   Targets non-button anchors so design-system buttons are unaffected. */
a:not(.btn):not(.ds-btn) {
    color: var(--ds-link-color);
    text-decoration: none;
    text-decoration-skip-ink: auto;
    transition: color var(--ds-transition-color), font-weight var(--ds-transition-color);
    font-weight: inherit;
}

a:not(.btn):not(.ds-btn):hover,
a:not(.btn):not(.ds-btn):focus {
    color: color-mix(in srgb, var(--ds-link-hover) 85%, black 15%);
    /* subtle heavier weight on hover for affordance */
    font-weight: 600;
    text-decoration: none;
    outline: none;
}

/* Strong and emphasis */
strong,
b {
    font-weight: var(--ds-font-weight-bold);
}

em,
i {
    font-style: italic;
}

/* Small text */
small {
    font-size: var(--ds-font-size-sm);
}

/* Code */
code,
kbd,
pre,
samp {
    font-family: var(--ds-font-family-monospace);
    font-size: var(--ds-font-size-sm);
}

/* Horizontal rules */
hr {
    border: 0;
    border-top: 1px solid var(--ds-border-color);
    margin: var(--ds-space-6) 0;
}