:root {
    --page-bg: #f4efe6;
    --panel-bg: rgba(255, 252, 246, 0.9);
    --panel-border: rgba(31, 41, 55, 0.09);
    --text-strong: #18252c;
    --text-muted: #5f6873;
    --accent: #c96d44;
    --accent-dark: #7b4128;
    --shadow-soft: 0 24px 60px rgba(24, 37, 44, 0.12);
}

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: "Segoe UI Variable Text", "Trebuchet MS", sans-serif;
    color: var(--text-strong);
    background:
        radial-gradient(circle at top left, rgba(201, 109, 68, 0.16), transparent 26%),
        radial-gradient(circle at top right, rgba(31, 60, 69, 0.12), transparent 24%),
        linear-gradient(180deg, #f7f2ea 0%, var(--page-bg) 100%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

a,
.btn-link {
    color: inherit;
}

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

.btn-primary {
    color: #fff;
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.8), 0 0 0 0.25rem rgba(201, 109, 68, 0.35);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

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

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}