:root {
  --primary: #2F7A4F;
  --primary-hover: #256040;
  --accent: #F5A623;
  --ink: #1A1A1A;
  --surface: #FFFFFF;
  --bg: #F7F5F0;
  --danger: #D94F3D;
  --muted: #6B7280;
  --line: #E5E2DC;
  --success: #2F7A4F;
  --warning: #F5A623;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.6;
}
.badge-success { background: color-mix(in srgb, var(--success) 15%, white); color: var(--success); }
.badge-warning { background: color-mix(in srgb, var(--warning) 18%, white); color: #8a5a00; }
.badge-muted { background: color-mix(in srgb, var(--muted) 15%, white); color: var(--muted); }
.badge-danger { background: color-mix(in srgb, var(--danger) 15%, white); color: var(--danger); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  transition: background-color .15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { opacity: .9; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.field-error { color: var(--danger); font-size: 13px; margin-top: 4px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], select, textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 16px;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.flash {
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}
.flash-success { background: color-mix(in srgb, var(--success) 12%, white); color: var(--primary-hover); border: 1px solid color-mix(in srgb, var(--success) 30%, white); }
.flash-error { background: color-mix(in srgb, var(--danger) 10%, white); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, white); }

[x-cloak] { display: none !important; }