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

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  color: #1a1714;
  background-color: #f5f0eb;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1a1714;
  font-weight: 500;
}

h1:focus {
  outline: none;
}

a,
.btn-link {
  color: #4a4540;
  text-decoration: none;
}

a:hover,
.btn-link:hover {
  color: #1a1714;
  text-decoration: underline;
}

/* ── Buttons ── */
.btn-primary {
  color: #f0ebe3;
  background-color: #6b6560;
  border-color: #57514c;
}

.btn-primary:hover {
  background-color: #57514c;
  border-color: #3a3530;
  color: #f0ebe3;
}

.btn-secondary {
  color: #3a3530;
  background-color: #e0d9d2;
  border-color: #cdc5bc;
}

.btn-secondary:hover {
  background-color: #cdc5bc;
  border-color: #b8b0a7;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem #f5f0eb,
    0 0 0 0.25rem #9c9089;
}

/* ── Content ── */
.content {
  padding-top: 1.1rem;
}

/* ── Form validation ── */
.valid.modified:not([type="checkbox"]) {
  outline: 1px solid #7a9e7e;
}

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

.validation-message {
  color: #b85c5c;
  font-size: 0.85rem;
}

/* ── Blazor error boundary ── */
.blazor-error-boundary {
  background: #fff8f0;
  border-left: 4px solid #c49a6c;
  padding: 1rem 1rem 1rem 1.5rem;
  color: #7a5c38;
  font-size: 0.875rem;
}

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

/* ── Misc ── */
.darker-border-checkbox.form-check-input {
  border-color: #9c9089;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: #9c9089;
  text-align: end;
}

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