/*
  The theme of the kit: the one file a host references, at _content/Demuxer.Sdk.Ui/Theme/Theme.css, and the only
  folder of the kit where a colour, a family, a size of type, a radius or a shadow is written as a literal. Every
  primitive, component and screen reads these custom properties, and the theme of an app writes the roles of its own
  domain over the ramps and the measures declared here.

  The theme follows the appearance of the system - light by default, dark when the system asks for it - unless the
  root of the page, or a region of it, is forced into one with `.theme-light` or `.theme-dark`; `.theme-light-header`
  beside `.theme-light` turns the header light, and `.density-compact` tightens the frame of the window.
*/

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

:root
{
    color-scheme: light dark;
}

.theme-light
{
    color-scheme: light;
}

.theme-dark
{
    color-scheme: dark;
}

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

html
{
    font-size: 100%;
}

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

/* Code, wherever it is written: the family of code at the size and line of the editor. */
pre,
code,
kbd,
samp
{
    margin: 0;
    font: var(--type-editor);
}

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

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