/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: 700;
  padding: 8px 15px;
  background-color: var(--color-success);
  color: var(--color-background);
  border: 2px solid transparent;
  box-shadow: 0 2px 0 #002d18;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.btn:hover { background-color: #005a30; color: var(--color-background); }
.btn:active { top: 2px; box-shadow: none; position: relative; }

.btn--secondary {
  background-color: var(--color-page-bg);
  color: var(--color-text);
  box-shadow: 0 2px 0 var(--color-border);
}
.btn--secondary:hover { background-color: #d8dada; }

/* Form Groups & Inputs */
.form-group {
  margin-bottom: var(--space-4);
}

.label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.hint {
  display: block;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.input {
  width: 100%;
  max-width: 400px;
  padding: var(--space-2);
  font-size: var(--font-size-body);
  font-family: var(--font-family);
  border: 2px solid var(--color-text);
  background-color: var(--color-background);
}

.input:focus {
  border-color: var(--color-text);
  outline: 3px solid var(--color-focus);
}

.btn--warning {
  background-color: var(--color-error);
  box-shadow: 0 2px 0 #57140c;
}
.btn--warning:hover {
  background-color: #a02815;
}