@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:wght@400;600&display=swap");

:root {
  --ink: #1b1a17;
  --sand: #f2e9dc;
  --sun: #f2b04c;
  --sage: #47664a;
  --stone: #c9c1b3;
  --paper: #fff8ef;
  --accent: #1f3a5f;
}

body {
  font-family: "Space Grotesk", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 12%, rgba(242, 176, 76, 0.2), transparent 45%),
    radial-gradient(circle at 85% 5%, rgba(71, 102, 74, 0.2), transparent 42%),
    linear-gradient(180deg, #f7efe3 0%, #f2e9dc 40%, #efe4d2 100%);
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: "Source Serif 4", serif;
  letter-spacing: 0.01em;
}

.card {
  border: none;
  border-radius: 18px;
  background: rgba(255, 248, 239, 0.9);
  box-shadow: 0 18px 30px rgba(27, 26, 23, 0.08);
  overflow: hidden;
}

.card-header {
  border-bottom: 1px solid rgba(27, 26, 23, 0.08);
}

.form-control,
.form-select {
  border-radius: 12px;
  border: 1px solid rgba(27, 26, 23, 0.15);
  background-color: var(--paper);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sun);
  box-shadow: 0 0 0 0.2rem rgba(242, 176, 76, 0.2);
}

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

.btn-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-outline-primary:hover {
  background-color: var(--accent);
  border-color: var(--accent);
}

.navbar.bg-dark {
  background-color: var(--accent) !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.82);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #fff;
}

.table {
  color: var(--ink);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(242, 176, 76, 0.08);
}

.modal-content {
  background: var(--paper);
  border-radius: 18px;
  border: 1px solid rgba(27, 26, 23, 0.12);
  box-shadow: 0 24px 40px rgba(27, 26, 23, 0.2);
}

.modal-header,
.modal-header.bg-primary,
.modal-header.bg-dark {
  background: var(--accent);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.modal-header .btn-close {
  filter: invert(1) brightness(1.2);
}

.modal-footer {
  border-top: 1px solid rgba(27, 26, 23, 0.1);
}

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

.btn-dark:hover,
.btn-dark:focus {
  background-color: #162a45;
  border-color: #162a45;
}

.text-warning {
  color: var(--sun) !important;
}

.bg-dark {
  background-color: var(--accent) !important;
}

.badge.bg-warning {
  background-color: var(--sun) !important;
  color: var(--ink) !important;
}

.list-group-item {
  background: rgba(255, 248, 239, 0.92);
  border-color: rgba(27, 26, 23, 0.12);
}