/* ========================================================================
   typography.css -- ScribeHold marketing display utilities

   Component layer of the modular CSS bundle. Consumes tokens from
   tokens.css. Supplements base.css (which owns root + heading element
   defaults) with opt-in marketing display classes:

     .eyebrow            -- small uppercase label above a section heading
                            (accent ink, tracked, semibold)
     .lede               -- emphasised lead paragraph that follows a
                            heading or opens a section (larger size,
                            looser line-height, muted ink)
     .microcopy          -- small helper text below CTAs or inputs
                            (small size, muted ink)
     .callout            -- highlighted aside / pull-quote block with a
                            soft accent wash and accent left rule
     .section-heading    -- section H2 treatment (display size, tight
                            tracking) for consistent section headers
     .section-subheading -- supporting line under a .section-heading
                            (medium size, muted ink, snug line-height)

   These utilities do NOT redefine base element styles already provided
   by base.css. They attach to any element via class only:

       <p class="eyebrow">For attorneys</p>
       <h2 class="section-heading">Built for legal review</h2>
       <p class="section-subheading">Court-ready exports, no setup.</p>
       <p class="lede">First-paragraph emphasis on a marketing page.</p>
       <aside class="callout">Pull-quote or sidebar note.</aside>
       <p class="microcopy">Cancel anytime. No card required.</p>

   All color, type, spacing, radius, and shadow values come from
   tokens.css via var(...). No hard-coded hex values in this file.

   Bundle order: tokens -> base -> layout -> components/* -> pages/*
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. .eyebrow -- small uppercase label above a section heading
   ------------------------------------------------------------------------ */

.eyebrow {
    display: block;
    margin: 0 0 var(--space-2);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-accent-ink);
}

/* ------------------------------------------------------------------------
   2. .lede -- emphasised lead paragraph
   ------------------------------------------------------------------------ */

.lede {
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
    color: var(--color-muted);
    max-width: var(--container-narrow);
}

.lede:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------
   3. .microcopy -- small helper text
   ------------------------------------------------------------------------ */

.microcopy {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-muted);
}

.microcopy--spaced {
    margin-top: var(--space-8);
}

/* ------------------------------------------------------------------------
   4. .callout -- highlighted aside / pull-quote block
   ------------------------------------------------------------------------ */

.callout {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-accent-wash-06);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
}

.callout > :first-child {
    margin-top: 0;
}

.callout > :last-child {
    margin-bottom: 0;
}

/* .callout__heading -- subordinated heading inside a callout aside.
   Sized below .section-heading so a callout reads as supporting copy,
   not as a peer of the surrounding page sections. */
.callout__heading {
    margin: 0 0 var(--space-2);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-ink);
}

/* .callout--teaser -- modifier for "coming soon" / secondary-CTA blocks.
   Quieter than the base callout: thinner background wash, muted body
   tone, and a top margin large enough to separate from the preceding
   section so the teaser reads as ancillary rather than continuing the
   primary value prop. */
.callout--teaser {
    margin-top: var(--space-10);
    background: var(--color-accent-wash-04);
    color: var(--color-muted);
}

.callout--teaser .callout__heading {
    color: var(--color-muted);
}

/* ------------------------------------------------------------------------
   5. .section-heading -- section H2 display treatment
   ------------------------------------------------------------------------ */

.section-heading {
    margin: 0 0 var(--space-3);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-ink);
}

@media (min-width: 768px) {
    .section-heading {
        font-size: var(--font-size-4xl);
    }
}

/* ------------------------------------------------------------------------
   6. .section-subheading -- supporting line under .section-heading
   ------------------------------------------------------------------------ */

.section-subheading {
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-snug);
    color: var(--color-muted);
    max-width: var(--container-narrow);
}

.section-subheading:last-child {
    margin-bottom: 0;
}