/*
  The theme of the site of the Demuxer account, which the host references after the theme of the kit,
  `_content/Demuxer.Sdk.Ui/Theme/Theme.css`, and the only folder of this library where a colour, a family, a size of
  type, a radius or a shadow is written as a literal. Every other stylesheet reads the custom properties declared here
  or in the theme of the kit, and a test fails the moment one of them writes a literal of its own, or reads one that
  neither declares.

  Two scopes, each read by the same roles - surface, text, action, edge, height of a control, radius of a control,
  family of text:

  - the scope of the account, the default, painted by the kit as the desktop apps are painted: light, and dark when the
    system asks for it. The ramps, the roles, the families, the styles, the radii, the shadows, the measures, the base
    and the focus are the kit's; this theme adds only the measures of the screens of the account and the roles no
    desktop has;
  - the public scope, `[data-surface="site"]`, which the layout of the public pages puts on its root beside
    `.theme-light`: the kit paints its light theme under it whatever the system asks for, and this theme then
    redeclares the roles the public pages paint otherwise, in their type, their colours and their measures.

  A primitive reads the role, and never the scope: the same button is a black pill of 48 in Geist under the public
  scope and a box of 28 in Inter under the scope of the account. `[data-surface="site"]` weighs what `:root` and
  `.theme-light` weigh, and wins over them only because this theme is read after the kit's: the host must keep that
  order.
*/

@import url("Colors.css?v=0.5.0");
@import url("Typography.css?v=0.5.0");
@import url("Space.css?v=0.5.0");
@import url("Radius.css?v=0.5.0");
@import url("Shadow.css?v=0.5.0");
@import url("Layout.css?v=0.5.0");

[data-surface="site"]
{
    background-color: var(--surface-main);
    color: var(--text-primary);
    font: var(--type-default);
}

/* A page of the public scope glides to a section of it, and jumps for whoever asked the system for less motion. */
@media (prefers-reduced-motion: no-preference)
{
    html:has([data-surface="site"])
    {
        scroll-behavior: smooth;
    }
}

/* What the runtime shows when the page failed: hidden until the runtime shows it. */
#blazor-error-ui
{
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--layer-overlay);
    padding: var(--space-banner);
    border-top: var(--border-width) solid var(--banner-error-border);
    background-color: var(--banner-error-fill);
    color: var(--text-primary);
    font: var(--type-default);
}

#blazor-error-ui .reload
{
    margin-inline-start: var(--account-gap-inline);
    color: var(--link);
}

/* The ring of the focus of the public scope stands further from its control than the kit's. */
[data-surface="site"] :focus-visible
{
    outline-offset: var(--focus-offset);
}