@layer ds.foundation {
/* Typography: H1–H6 defaults + text-role helpers.
   Blocks compose these; they don't restyle them. A heading's visual size can be
   changed independently of its semantic tag with the .ds-h* / .ds-hero helpers. */

    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 var(--space-4);
        font-family: var(--font-display);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-tight);
        color: var(--color-heading);
        text-wrap: balance;
    }

    h1 { font-size: var(--text-h1); }
    h2 { font-size: var(--text-h2); }
    h3 { font-size: var(--text-h3); }
    h4 { font-size: var(--text-h4); }
    h5 { font-size: var(--text-h5); }
    h6 { font-size: var(--text-h6); }

    p {
        margin: 0 0 1em;
        text-wrap: pretty;
    }

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

    a {
        color: var(--color-primary);
        text-underline-offset: 0.15em;
    }

    a:hover { color: var(--color-primary-hover); }

    /* Visual-size helpers — apply a heading scale to any element */
    .ds-hero { font-size: var(--text-hero); font-family: var(--font-display); font-weight: var(--font-weight-bold); line-height: 1.04; letter-spacing: -0.02em; }
    .ds-h1   { font-size: var(--text-h1); }
    .ds-h2   { font-size: var(--text-h2); }
    .ds-h3   { font-size: var(--text-h3); }

    /* Text roles */
    .ds-lead  { font-size: var(--text-lead); line-height: 1.5; color: var(--color-text-muted); }
    .ds-small { font-size: var(--text-small); }
    .ds-tiny  { font-size: var(--text-xs); color: var(--color-text-muted); }
    .ds-muted { color: var(--color-text-muted); }

    .ds-kicker {
        display: inline-block;
        font-family: var(--font-body);
        font-size: var(--text-eyebrow);
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-accent);
        margin: 0 0 var(--space-3);
    }

    /* Accent micro-syntax target: *word* in a text slot renders as <span class="ds-accent"> */
    .ds-accent { color: var(--color-primary); }
}