:root {
    --solyon-background: #ffffff;
    --solyon-ink: #0d2038;
    --solyon-muted: #5c6c7d;
    --solyon-focus: #1f6fb2;
    --solyon-danger: #b32121;
    --solyon-valid: #2f8f5f;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--solyon-background);
    color: var(--solyon-ink);
    font-family: "Aptos", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    text-rendering: optimizeLegibility;
}

body {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--solyon-focus);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--solyon-focus);
    outline-offset: 3px;
}

.visually-hidden {
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--solyon-valid);
}

.invalid {
    outline: 1px solid var(--solyon-danger);
}

.validation-message {
    color: var(--solyon-danger);
}

.blazor-error-boundary {
    background: var(--solyon-danger);
    color: #ffffff;
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}