html {
  font-size: 14px;
}

:root {
  --font-ui: "Inter", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", "Segoe UI Variable Text", sans-serif;
  --font-dense: "Roboto Condensed", "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  --surface-page: #f7f5f2;
  --surface-panel: rgba(255, 255, 255, 0.9);
  --border-soft: rgba(101, 61, 52, 0.16);
  --text-strong: #1f1514;
  --text-muted: #66524d;
  --accent: #c63f32;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  font-family: var(--font-ui) !important;
  color: var(--text-strong);
  background:
    radial-gradient(circle at top right, rgba(255, 214, 209, 0.48), transparent 28%),
    linear-gradient(180deg, #fffdfa 0%, var(--surface-page) 100%);
  font-feature-settings: "cv11" 1, "ss01" 1;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
th {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

.navbar,
.container > main,
.footer {
  background: var(--surface-panel);
}

.navbar,
.container > main {
  border-radius: 1rem;
}

.table {
  font-family: var(--font-dense) !important;
}

table,
thead,
tbody,
th,
td {
  font-family: var(--font-dense);
}

.form-control,
.btn {
  border-radius: 0.75rem;
}

.btn-outline-secondary {
  color: var(--text-muted);
  border-color: rgba(120, 72, 62, 0.3);
}

.btn-outline-secondary:hover {
  color: #a82116;
  background: rgba(255, 243, 241, 0.96);
}