/*
  The theme of the app of the customer of Foodoz: one file for a host to reference, and the only place in this library
  where a colour, a family, a size, a step of spacing, a radius or a shadow is written as a literal. Everything else -
  primitive, component and screen - reads the roles these files declare, and a test of this solution fails the moment
  a stylesheet of the library writes a value of its own or names a scale.

  The design has a light theme alone, and so has the app: nothing here answers to a dark one.
*/

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

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

html
{
    /* The 16 of `Body/Medium`, which every rem of this theme is a multiple of. */
    font-size: 100%;
    color-scheme: light;
}

body
{
    margin: 0;
    color: var(--text-strong);
    font-family: var(--font-family);
    font-size: var(--font-size-body-medium);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-body);
}

/*
  What the router focuses on arriving at a screen - its heading, made focusable by the router alone - is focused for
  whoever reads the page aloud, and never drawn with the ring of a control nobody can press.
*/
[tabindex="-1"]:focus
{
    outline: none;
}

/*
  The bar the host writes into its page for a failure of the WebAssembly itself. It belongs to the page and not to any
  component, and it is drawn from the roles like everything else.
*/
#blazor-error-ui
{
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    padding: var(--space-12) var(--margin-screen);
    background: var(--surface);
    color: var(--text-strong);
    border-top: var(--border-width) solid var(--border);
}

#blazor-error-ui .reload
{
    margin-inline-start: var(--space-8);
    color: var(--action);
}