/*
  The theme of the site of the Demuxer account: the one stylesheet the host references, 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, and a test fails the moment one of them writes a literal of its own.

  One theme, two scopes. Every token is named by its role - surface, text, action, edge, height of a control, radius
  of a control, family of text - and declared twice:

  - the scope of the account, the default, painted as the desktop app of Apiq is painted: light, and dark when the
    system asks for it;
  - the public scope, `[data-surface="site"]`, which the layout of the public pages puts on its root: light only, and
    in the type, the colours and the measures of the public pages.

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

@import url("Colors.css");
@import url("Typography.css");
@import url("Space.css");
@import url("Radius.css");
@import url("Shadow.css");
@import url("Layout.css");

:root
{
    color-scheme: light dark;
}

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

*,
*::before,
*::after
{
    box-sizing: border-box;
}

html
{
    font-size: 100%;
}

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

body
{
    margin: 0;
    background-color: var(--surface-main);
    color: var(--text-primary);
    font: var(--type-default);
}

pre,
code,
kbd,
samp
{
    margin: 0;
    font: var(--type-code);
}

/* The ring of the focus, drawn only when the keyboard put it there. */
:focus:not(:focus-visible)
{
    outline: none;
}

:focus-visible
{
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
}

/* The heading the router moves the focus to on every navigation is not something the keyboard reached. */
[tabindex="-1"]:focus-visible
{
    outline: none;
}

/* 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(--space-inline);
    color: var(--link);
}