:root {
  --sand: #f5efe3;
  --paper: #fffdf7;
  --ink: #1d3230;
  --ink-soft: #5c6f6c;
  --sea: #0e7a68;
  --sea-deep: #0a5c4e;
  --coral: #e2725b;
  --line: #e3d9c6;
}

body {
  font-family: "Outfit", sans-serif;
  color: var(--ink);
  background-color: var(--sand);
  background-image:
    radial-gradient(
      circle at 15% 20%,
      rgba(14, 122, 104, 0.08),
      transparent 40%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(226, 114, 91, 0.09),
      transparent 45%
    );
  min-height: 100vh;
}

/* ---- Card ---- */

.card {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(29, 50, 48, 0.06),
    0 16px 40px -12px rgba(29, 50, 48, 0.18);
  overflow: hidden;
}

.card::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--sea) 0%,
    var(--sea) 55%,
    var(--coral) 100%
  );
}

/* ---- Headings ---- */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea);
  text-align: center;
  margin-bottom: 0.25rem;
}

.card-title {
  font-family: "Fraunces", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.subtitle {
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

/* ---- Form fields ---- */

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.form-control,
.form-select {
  background-color: #fbf8f0;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  color: var(--ink);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.form-control:hover,
.form-select:hover {
  border-color: #cbbfa6;
}

.form-control:focus,
.form-select:focus {
  background-color: #fff;
  border-color: var(--sea);
  box-shadow: 0 0 0 0.25rem rgba(14, 122, 104, 0.15);
}

.form-check-input:checked {
  background-color: var(--sea);
  border-color: var(--sea);
}

.form-check-input:focus {
  border-color: var(--sea);
  box-shadow: 0 0 0 0.25rem rgba(14, 122, 104, 0.15);
}

/* ---- City / coordinates readout ---- */

.geo-box {
  background-color: rgba(14, 122, 104, 0.06);
  border: 1px dashed rgba(14, 122, 104, 0.35);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  height: 100%;
}

.geo-box .fw-bold {
  color: var(--ink);
}

/* ---- Button ---- */

.btn-primary {
  background-color: var(--sea);
  border: none;
  border-radius: 10px;
  padding: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-primary:hover {
  background-color: var(--sea-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(10, 92, 78, 0.6);
}

.btn-primary:active {
  transform: translateY(0);
}

/* ---- Welcome page ---- */

.welcome-title {
  font-family: "Fraunces", serif;
  font-weight: 600;
  color: var(--ink);
}

.welcome-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.5rem;
}