/*
  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-dark`: the kit paints its dark theme under it whatever the system asks for, and this theme then redeclares
    the roles the public pages paint otherwise - their dark, their accent of lime, their type, their measures, their
    radii and their glows.

  A primitive reads the role, and never the scope: the same button is a softly rounded lime rectangle 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-dark` 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=2026.1028.1603");
@import url("Typography.css?v=2026.1028.1603");
@import url("Space.css?v=2026.1028.1603");
@import url("Radius.css?v=2026.1028.1603");
@import url("Shadow.css?v=2026.1028.1603");
@import url("Layout.css?v=2026.1028.1603");

[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);
}