/* 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;

/* The Basic frame's own paint, and nothing else: the ground its islands float in and the chrome bookending the
   well, each rule keyed on an element this page's Java writes and each value a theme token. The document's voice
   -- fonts, text color, the type scale for bare markup -- deliberately does not live here: it is the theme's,
   applied by core's Typography.css to every page whether or not it wears this frame. */

@layer rspond.component {
    body {
        /* The recessed surround every island floats in, painted once here because it is the space *between and
           around* the surfaces, not part of any one of them -- the same reason a Finder window tints itself once
           and lets its panels float, instead of each panel carrying its own surround. The page body is transparent
           to it, and the header and footer wear a token that resolves to this same fill, so the surround runs
           unbroken from the top of the banner to the bottom of the footer and the only edges on the page are the
           islands' own. */
        background: var(--rspond-page-background-secondary);
    }

    /* Header and footer are the same kind of thing -- the chrome bookending the well -- and both are matched by
       their landmark element, which the page's tray rows write into the markup. Each fill is a token of its own
       rather than the surround's directly so a branded application can paint its banner (a gradient, a brand
       colour, an image) without touching the well; by default the header's resolves to the surround and the
       footer's to the header's, so the chrome and the well read as one continuous field, while a theme that
       decorates its header can give the footer a plain fill. Neither draws a separating line where it meets the page body: the
       islands' gutters are the separation, and a border there would be a third element competing with the two
       surfaces it sits between -- the same reasoning that dialled the split divider's paint back. */

    header {
        padding: 12px 24px;
        background: var(--rspond-header-background);
    }

    /* Unequal on purpose: the islands' own gutter (8px) already stands above the footer, so a matching top
       padding doubled the space over the text while only the bottom padding stood under it. Topping the gutter
       up to the bottom's 12 is what makes the text read as centered in the band it closes the page with. */
    footer {
        padding: 4px 24px 12px;
        background: var(--rspond-footer-background);
        font-size: var(--rspond-font-size-small);
        color: var(--rspond-footer-text);
    }
}