:root {
    --surface: #ffffff;
    --surface-subtle: #f4f7f6;
    --surface-muted: #edf2f0;
    --text: #17221f;
    --text-secondary: #364842;
    --text-muted: #64736e;
    --border: #d6dfdc;
    --border-strong: #b7c5c0;
    --accent: #087a65;
    --accent-strong: #075f50;
    --accent-soft: #e2f2ed;
    --link: #17678a;
    --success: #21875f;
    --success-soft: #dff1e8;
    --warning: #a96f08;
    --warning-soft: #fff3d8;
    --danger: #a83b34;
    --danger-soft: #fbe9e7;
    --info: #356f91;
    --info-soft: #e6f0f5;
    --shadow-sm: 0 1px 2px rgba(22, 40, 34, .06);
    --shadow-lg: 0 12px 32px rgba(22, 40, 34, .16);
}

html,
body {
    min-height: 100%;
    margin: 0;
    color: var(--text);
    background: var(--surface-subtle);
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

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

a,
.btn-link {
    color: var(--link);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea,
summary {
    outline-offset: 2px;
}

:focus-visible {
    outline: 3px solid rgba(8, 122, 101, .28);
}

h1,
h2,
h3,
p {
    letter-spacing: 0;
}

h1:focus {
    outline: none;
}

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

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

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

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

.blazor-error-boundary::after {
    content: "Произошла ошибка приложения.";
}

.darker-border-checkbox.form-check-input {
    border-color: #7c8c86;
}