/*
  The theme of the console: one file 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 these custom properties, and a test of this solution fails the moment one of them writes a value
  of its own.

  It is a single theme. The Camero kit publishes no collection of variables and no modes, so there is nothing in it
  to build a dark theme out of, and inventing one is a layer of tokens of its own rather than a line added here.
*/

@import url("Colors.css");
@import url("Typography.css");
@import url("Space.css");
@import url("Elevation.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%;
}

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

    /* The narrow artboard is the narrowest thing drawn, so nothing is ever asked to lay out under it. */
    min-width: 0;
    overflow-x: hidden;
}

/*
  The focus ring of the console. The kit publishes a halo as an effect style rather than an outline, so that is what
  a control wears here, and only when the focus was reached by the keyboard: a heading moved to by the router, or a
  control clicked, is focused without being ringed.
*/
:focus:not(:focus-visible)
{
    outline: none;
}

:focus-visible
{
    outline: none;
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-focus);
}

/*
  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 tokens like everything else so that a console in trouble still looks like
  the console.
*/
#blazor-error-ui
{
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    background: var(--warning-subtle);
    color: var(--text-strong);
    font-size: var(--font-size-small);
    box-shadow: var(--shadow-bottom-action);
}

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

.surface
{
    background-color: var(--surface-raised);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-large);
}