/* 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.component {
    /* A heading's typography lives with the heading. It was previously written into the application page's stylesheet,
       which meant an application had to be a BasicWebPage for its headings to look like headings, and any look wearing
       the same properties won or lost by nothing more than which file the browser happened to load last. */

    .rspond-heading {
        font-weight: 650;
        letter-spacing: -0.02em;
    }

    /* Every size takes the primary text colour, because every one of them is a heading. Small once took the tinted
       heading token on the theory that at 14pt it reads as a label over a section rather than as a title -- but beside
       a card title in the primary colour it simply read as washed out, and two headings a few pixels apart in two
       different colours is a difference with nothing behind it. The tinted token still earns its keep where the thing
       really is a label rather than a heading: a table's uppercase column header, an at-a-glance type name. */
    .rspond-heading-small {
        color: var(--rspond-components-text-primary);
        font-size: var(--rspond-font-size-heading-small);
    }

    .rspond-heading-medium {
        color: var(--rspond-components-text-primary);
        font-size: var(--rspond-font-size-heading-medium);
    }

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