:root {
  --cream: #f5f0e8;
  --sand: #e8e0d3;
  --ink: #1a1715;
  --ink-soft: #3d3833;
  --rule: #d4cabc;
  --bg: #efe9df;
  --panel: #ffffff;
  --panel-border: #e0d7c8;
  --accent: #6b4f3f;
  --success: #4a6b3f;
  --danger: #a04040;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  min-height: 100vh;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

input[type="text"],
input[type="password"],
textarea,
.select-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: var(--ink);
  border-radius: 2px;
  transition: border-color 0.15s;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
.select-input:focus {
  outline: none;
  border-color: var(--ink);
}

textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.textarea-tall {
  min-height: 200px;
}

.is-hidden {
  display: none;
}

.btn {
  padding: 14px 20px;
  border: none;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 2px;
  font-weight: 500;
}

.btn-primary {
  background: var(--ink);
  color: var(--cream);
}

.btn-primary:hover {
  background: #000;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--panel-border);
}

.btn-secondary:hover {
  border-color: var(--ink);
}

.btn-compact {
  padding: 10px 14px;
}

.btn-small {
  padding: 8px;
  font-size: 10px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}