:root {
  --bg: #f1ede5;
  --panel: #fffdf8;
  --ink: #1f1b17;
  --muted: #625a50;
  --accent: #205c40;
  --accent-ink: #ffffff;
  --danger: #9b3d31;
  --border: #d8ccbb;
  --soft: #f8f1e4;
  --soft-strong: #f0e8da;
  --shadow: 0 10px 28px rgba(31, 27, 23, 0.06);
  --font-main: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-main);
  color: var(--ink);
  background:
    radial-gradient(circle at top left, #ead9b8 0, transparent 28%),
    linear-gradient(180deg, #f7f4ed 0, var(--bg) 100%);
}

a {
  color: var(--accent);
  font-weight: 700;
}

button,
input,
select,
textarea {
  font: inherit;
  border-radius: 10px;
  border: 1px solid var(--border);
}

input,
select,
textarea {
  color: var(--ink);
  background: #fff;
}

button {
  border: 0;
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

button.secondary {
  border: 1px solid var(--border);
  color: var(--ink);
  background: var(--soft);
}

button.danger,
.danger,
.danger-button {
  color: var(--accent-ink);
  background: var(--danger);
}

.panel,
.controls,
.sheet {
  background: var(--panel);
  border-color: var(--border);
}

.panel {
  box-shadow: var(--shadow);
}

.muted,
.status,
label,
legend {
  color: var(--muted);
}

pre,
.table-wrap {
  background: var(--soft);
}

th,
td {
  border-bottom-color: var(--border);
}

tbody tr:nth-child(even) {
  background: rgba(32, 92, 64, 0.05);
}