/*
  The theme of Mongiq: the one file a host references, and the only folder of this library where a colour, a family
  or a measure is written as a literal. Every other stylesheet reads these custom properties, and a test fails the
  moment one of them writes a colour of its own.

  The theme follows the appearance of the system: light by default, dark when the system asks for it.
*/

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

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

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