/* The layer order is restated in every SDK stylesheet, because the first declaration the browser sees is
   the one that counts and stylesheet load order varies by page. Consumer CSS stays unlayered and so
   always wins. */
@layer rspond.reset, rspond.vendor, rspond.document, rspond.component, rspond.theme, rspond.look;

@layer rspond.document {
    /* The theme's voice, applied to the document. The values are the theme's tokens; this file is only the
       statement that the document speaks in them, and it rides the base component contribution so every page a
       theme reaches -- chromed, standalone, error -- speaks the same way.

       It sits in the document layer, below components, because these are defaults for bare elements: a paragraph
       or a link that nothing else has spoken for. A component that styles an element it owns -- the navigation
       rail's entries, the theme switcher's lightbulb -- has decided about that element, and a default for every
       anchor on the page must not overrule it. When this sat in the theme layer it did, everywhere: a component's
       own link colour never applied. The values still follow the theme, since they are the theme's tokens. */

    body {
        font-family: var(--rspond-fonts-family);
        color: var(--rspond-components-text-primary);
        /* Match the brand mockup's text rendering: without antialiased smoothing, macOS/Chrome renders every
           label a half-weight heavier, which is what made the "thin" menu and tabs read as clunky. */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* The type scale for bare markup -- prose in a template, a card explaining itself -- so that raw headings and
       paragraphs read in the theme's register on any page, not only where a tier's chrome happens to load. */

    h1 {
        font-size: var(--rspond-font-size-heading-large);
        font-weight: 600;
        color: var(--rspond-components-text-primary);
    }

    h2 {
        font-size: var(--rspond-font-size-x-large);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--rspond-components-text-muted);
    }

    p {
        color: var(--rspond-components-text-secondary);
        line-height: 1.6;
    }

    a {
        color: var(--rspond-link-color);
        text-decoration: none;
        transition: color 0.15s ease;
    }

    a:hover {
        color: var(--rspond-link-color-hover);
    }

    /* A disabled link's colour has to be stated here, in the same layer as the `a` rule above it, because a later
       layer beats an earlier one no matter how specific the earlier selector is. Component.css already says
       `.rspond-disabled { color: … }` in the component layer, and while the link colour lived there too that class
       won on specificity; once the document's voice moved up into the theme layer, a bare element selector began
       defeating it, and every disabled link -- an anchor with no href, carrying aria-disabled -- painted in full
       link blue. The glyph inside one follows: Lucide icons are masks filled with currentColor.

       Every disabled link rather than only the button looks: LinkStateBehavior writes rspond-disabled solely for a
       genuinely disabled link, giving a current one rspond-current instead, so this cannot reach the highlighted
       states -- the current page, the selected tab, the active segment -- that also render as hrefless anchors. */
    a.rspond-disabled {
        color: var(--rspond-components-text-disabled);
    }
}