/* ============================================================
   Voorhees Design System — Components
   Buttons, cards, inputs, badges, tabs, kbd, table, code block.
   Depends on colors_and_type.css.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h);
  padding: 0 var(--space-4);
  font-family: var(--font-text);
  font-size: var(--text-subhead);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn--sm { --btn-h: 28px; padding: 0 var(--space-3); font-size: var(--text-footnote); border-radius: var(--radius-sm); }
.btn--lg { --btn-h: 44px; padding: 0 var(--space-5); font-size: var(--text-callout); border-radius: var(--radius-md); }

.btn--primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn--primary:hover  { background: var(--slate-09); border-color: var(--slate-09); }
.btn--primary:active { background: var(--slate-08); border-color: var(--slate-08); }

.btn--accent {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.btn--accent:hover  { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--accent:active { background: var(--accent-press); border-color: var(--accent-press); }

.btn--secondary {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover  { background: var(--bg-subtle); border-color: var(--border-strong); }
.btn--secondary:active { background: var(--bg-muted); }

.btn--ghost {
  background: transparent;
  color: var(--fg-secondary);
}
.btn--ghost:hover  { background: var(--bg-muted); color: var(--fg); }
.btn--ghost:active { background: var(--bg-sunken); }

.btn--link {
  background: transparent;
  color: var(--accent);
  height: auto;
  padding: 0;
  border: none;
}
.btn--link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card--elevated  { box-shadow: var(--shadow-md); border-color: var(--border-subtle); }
.card--flat      { background: var(--bg-subtle); border-color: transparent; }
.card--interactive { cursor: pointer; }
.card--interactive:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ---------- Inputs ---------- */
.input,
.textarea,
.select {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 var(--space-3);
  font-family: var(--font-text);
  font-size: var(--text-subhead);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  letter-spacing: var(--tracking-snug);
}
.textarea {
  height: auto;
  min-height: 92px;
  padding: var(--space-3);
  line-height: var(--lh-normal);
  resize: vertical;
}
.input::placeholder,
.textarea::placeholder { color: var(--fg-quaternary); }
.input:hover,
.textarea:hover,
.select:hover { border-color: var(--border-strong); }
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.input--with-icon { padding-left: 36px; }
.field-label {
  display: block;
  font-size: var(--text-footnote);
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
  margin-bottom: var(--space-2);
  letter-spacing: var(--tracking-snug);
}

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
}
.badge--accent  { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.badge--success { background: var(--green-100); color: var(--green-500); border-color: transparent; }
.badge--warn    { background: var(--amber-100); color: var(--amber-500); border-color: transparent; }
.badge--danger  { background: var(--red-100);   color: var(--red-500);   border-color: transparent; }
.badge--outline { background: transparent; border-color: var(--border); color: var(--fg-secondary); }

.badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ---------- Kbd ---------- */
kbd, .kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-xs);
}

/* ---------- Table ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-subhead);
}
.table th,
.table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.table th {
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.table tr:last-child td { border-bottom: none; }

/* ---------- Divider / nav ---------- */
.divider { border-top: 1px solid var(--border); }

/* ---------- Backdrop blur surface (nav bar pattern) ---------- */
.surface-blur {
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

/* ---------- Code block with header (filename row) ---------- */
.codeblock {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.codeblock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--fg-tertiary);
  background: var(--surface);
}
.codeblock pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* ---------- Tag (technology pill) ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}