/* ============================================
   BUTTONS & FORM ELEMENTS
   ============================================ */

/* ── Primary ── */
.btn-blue {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 11px 24px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .2s;
  font-family: var(--font-body);
}
.btn-blue:hover { background: var(--blue-dark); }

/* ── Outline ── */
.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 10px 22px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--font-body);
}
.btn-outline:hover { background: var(--blue); color: #fff; }

/* ── Ghost ── */
.btn-ghost {
  background: #1e2433;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--font-body);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

/* ── Danger / small action variants ── */
.btn-success { background: #276749; color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }
.btn-dark    { background: #2d3748; color: var(--text); border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }
.btn-slate   { background: #374151; color: var(--text); border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }

/* ── Form Elements ── */
.form-label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: var(--text);
  font-size: .85rem;
  font-family: var(--font-body);
  transition: border-color .2s;
}
.form-input:focus       { outline: none; border-color: var(--blue); }
.form-input::placeholder { color: var(--muted); }
textarea.form-input     { resize: vertical; min-height: 100px; }

.form-select {
  width: 100%;
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: var(--text);
  font-size: .85rem;
  font-family: var(--font-body);
  appearance: none;
  cursor: pointer;
  transition: border-color .2s;
}
.form-select:focus { outline: none; border-color: var(--blue); }

/* ── Range sliders ── */
.range-input {
  width: 100%;
  accent-color: var(--blue);
  cursor: pointer;
  margin: 8px 0;
}