@layer base {

    /* ── Document baseline ─────────────────────────────────────────
     This is the "zero-class page still looks right" layer. Every
     rule here consumes a semantic token so the host can rebrand
     the entire baseline by overriding tokens. */

    html {
        font-family: var(--font-body);
        font-size: var(--fs-body); /* base size for rem math */
        line-height: 1.5;
        color: var(--color-ink);
        background: var(--color-surface);
        tab-size: 4;
    }

    body {
        font-family: inherit;
        color: inherit;
        background: inherit;
        /* Flex column body is the "sticky footer" layout pattern —
           lets a middle row (e.g. .app-shell) absorb all remaining
           vertical space via flex-grow so the page reliably fills
           the viewport even when content is short. 100dvh reacts
           to the mobile address bar; 100vh is the fallback. The
           footer (when present) is never position:fixed — it sits
           below content in normal flow. */
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* ── Dark surface inversion ────────────────────────────────────
     Any element marked [data-surface="dark"] flips the text-related
     semantic tokens so descendants using --color-ink etc. render
     correctly on a dark background.

     NOTE: This rule does NOT set background or flip --color-surface.
     Doing so creates a circular reference: components like .c-band
     that use --color-ink for their own background would pick up the
     flipped (light) value. Components using [data-surface="dark"]
     must explicitly set their own background using a stable token
     (e.g., a brand primitive or a dedicated inverse-surface token). */
    [data-surface="dark"] {
        --color-ink:      var(--color-on-dark);
        --color-ink-h1:   var(--color-on-dark);
        --color-ink-h2:   var(--color-on-dark);
        --color-ink-h3:   var(--color-on-dark);
        --color-ink-soft: var(--color-on-dark-mute);
        --color-ink-mute: var(--color-on-dark-mute);
        --color-line:     rgb(255 255 255 / .15);
    }

    /* ── Headings ──────────────────────────────────────────────────
     Display font + tighter line-height. Specific sizes per level
     so raw markup has a visible hierarchy without components.
     Colour is stratified by level (h1 → --color-ink-h1, h2 → -h2,
     h3 → -h3) so hierarchy reads from tone as well as size; h4-h6
     fall back to --color-ink (same as body) since they sit inside
     content flow where size + weight carry the differentiation. */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
        font-weight: 600;
        line-height: 1.15;
        text-wrap: balance; /* nicer headline wrapping */
        letter-spacing: -0.01em;
    }

    h1 {
        font-size: var(--fs-display-m);
        color: var(--color-ink-h1);
    }

    h2 {
        font-size: var(--fs-display-s);
        color: var(--color-ink-h2);
    }

    h3 {
        font-size: var(--fs-heading);
        color: var(--color-ink-h3);
    }

    h4 {
        font-size: var(--fs-body-lg);
        color: var(--color-ink);
    }

    h5 {
        font-size: var(--fs-body);
        color: var(--color-ink);
    }

    h6 {
        font-size: var(--fs-body-sm);
        color: var(--color-ink);
    }

    /* ── Body text ─────────────────────────────────────────────────
     Readable default measure; components can override. text-wrap:
     pretty avoids orphans/rivers at paragraph ends. */
    p {
        max-width: var(--measure-body);
        text-wrap: pretty;
    }

    /* ── Links ─────────────────────────────────────────────────────
     Opt back in to color + underline. Components that don't want
     link styling (nav items, buttons built as <a>) override
     explicitly. */
    a {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.15em;
        transition: color var(--dur-fast) var(--ease);
    }

        a:hover {
            color: var(--color-accent-deep);
        }

        a:focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
            border-radius: var(--radius-sm);
        }

    /* ── Inline semantics ──────────────────────────────────────────
     Preserve the meaning of strong/em/mark visually, using tokens
     so the treatment is brand-consistent. */
    strong, b {
        font-weight: 600;
    }

    em, i, cite {
        font-style: italic;
    }

    small {
        font-size: 0.85em;
        color: var(--color-ink-mute);
    }

    mark {
        background: var(--color-accent-soft);
        color: var(--color-ink);
        padding-inline: 0.15em;
    }

    /* ── Code + pre ────────────────────────────────────────────────
     Mono font + slightly different surface so inline code reads
     as code without needing a class. */
    code, kbd, samp, pre {
        font-family: var(--font-mono);
        font-size: 0.9em;
    }

    :not(pre) > code {
        background: var(--color-surface-alt);
        padding: 0.1em 0.35em;
        border-radius: var(--radius-sm);
    }

    pre {
        background: var(--color-surface-alt);
        padding: var(--space-4);
        border-radius: var(--radius-md);
        overflow-x: auto;
    }

    /* ── Horizontal rule ───────────────────────────────────────────
     A single hairline, consuming the line token. No shadow, no
     double-border artifacts. */
    hr {
        border: 0;
        border-top: 1px solid var(--color-line);
        margin-block: var(--space-6);
    }

    /* ── Blockquote ────────────────────────────────────────────────
     Minimal treatment — a left border using the accent token.
     Components can add fancier quote styling. */
    blockquote {
        border-inline-start: 2px solid var(--color-accent);
        padding-inline-start: var(--space-4);
        color: var(--color-ink-soft);
        font-style: italic;
    }

    /* ── Lists ─────────────────────────────────────────────────────
     Slight indent; tokens decide spacing. Lists with role="list"
     are stripped by reset; regular semantic lists keep defaults. */
    ul, ol {
        padding-inline-start: var(--space-5);
    }

    li + li {
        margin-top: var(--space-1);
    }

    /* ── Definition lists ──────────────────────────────────────────
     dt bolder, dd indented. Respects the semantic meaning. */
    dt {
        font-weight: 600;
        color: var(--color-ink);
    }

    dd {
        margin-inline-start: var(--space-4);
        color: var(--color-ink-soft);
    }

    /* ── Tables ────────────────────────────────────────────────────
     Minimal baseline. Components (.c-table, Syncfusion grids) own
     the fancy stuff. */
    table {
        width: 100%;
        text-align: left;
    }

    caption {
        caption-side: bottom;
        color: var(--color-ink-mute);
        font-size: var(--fs-ui-sm);
        padding-block: var(--space-2);
        text-align: left;
    }

    th {
        font-weight: 600;
        color: var(--color-ink);
        border-bottom: 1px solid var(--color-line);
        padding: var(--space-2) var(--space-3);
    }

    td {
        border-bottom: 1px solid var(--color-line);
        padding: var(--space-2) var(--space-3);
    }

    /* ── Form elements ─────────────────────────────────────────────
     Just enough so raw <input>/<select>/<textarea> looks aligned
     with the design. Real forms use the component layer. */
    input, textarea, select {
        background: var(--color-surface);
        color: var(--color-ink);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-sm);
        padding: var(--space-2) var(--space-3);
    }

        input:focus-visible,
        textarea:focus-visible,
        select:focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: -1px;
            border-color: var(--color-accent);
        }

    ::placeholder {
        color: var(--color-ink-mute);
        opacity: 1; /* Firefox defaults to faint; normalize */
    }

    /* ── Details / summary ─────────────────────────────────────────
     Make native disclosure widgets look intentional. */
    summary {
        cursor: pointer;
        font-weight: 500;
    }

        summary:focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

    /* ── Selection ─────────────────────────────────────────────────
     Branded text selection. Small detail, high polish. */
    ::selection {
        background: var(--color-accent-soft);
        color: var(--color-ink);
    }

    /* ── Address ───────────────────────────────────────────────────
     <address> is italic by default; most brands prefer upright. */
    address {
        font-style: normal;
    }

    /* ── Figure / figcaption ───────────────────────────────────────
     Figcaption as supportive text. */
    figcaption {
        color: var(--color-ink-mute);
        font-size: var(--fs-ui-sm);
        margin-top: var(--space-2);
    }
}