/* Hearth component primitives. Importable wherever components are used. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active { transform: translateY(1px); }

.btn--lg { height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--radius-md); }
.btn--sm { height: 28px; padding: 0 10px; font-size: 13px; }

.btn--primary {
  background: var(--ember);
  color: var(--paper);
  border-color: var(--ember);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), var(--shadow-xs);
}
.btn--primary:hover { background: var(--ember-600); border-color: var(--ember-600); }
.btn--primary:active { background: var(--ember-700); border-color: var(--ember-700); }

.btn--secondary {
  background: var(--snow);
  color: var(--ink-900);
  border-color: var(--veil-strong);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover { background: var(--mist); }
.btn--secondary:active { background: var(--paper-deep); }

.btn--ghost {
  background: transparent;
  color: var(--ink-700);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--mist); color: var(--ink-900); }

.btn--destructive {
  background: var(--snow);
  color: var(--crimson);
  border-color: var(--veil-strong);
}
.btn--destructive:hover { background: var(--crimson-100); border-color: var(--crimson-200); color: var(--crimson-700); }

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

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 700; color: var(--ink-700); }
.field > .hint { font-size: 12px; color: var(--fg-muted); }

.input, .textarea, .select {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
  background: var(--snow);
  border: 1px solid var(--veil-strong);
  border-radius: var(--radius-sm);
  height: 36px;
  padding: 0 12px;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  width: 100%;
  box-sizing: border-box;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-300); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--ember);
  box-shadow: var(--ring);
}
.textarea { height: auto; padding: 10px 12px; min-height: 80px; line-height: 1.5; resize: vertical; }
.input[disabled] { background: var(--mist); color: var(--ink-400); cursor: not-allowed; }

/* ---------- Cards ---------- */
.h-card {
  background: var(--snow);
  border: 1px solid var(--veil);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.h-card:hover { box-shadow: var(--shadow-sm); border-color: var(--veil-strong); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--mist);
  color: var(--ink-700);
  border: 1px solid var(--veil);
}
.badge--ember    { background: var(--ember-100); color: var(--ember-700); border-color: var(--ember-200); }
.badge--sage     { background: var(--sage-100);  color: var(--sage-700);  border-color: var(--sage-200); }
.badge--plum     { background: var(--plum-100);  color: var(--plum-700);  border-color: var(--plum-200); }
.badge--amber    { background: var(--amber-100); color: var(--amber-700); border-color: var(--amber-200); }
.badge--crimson  { background: var(--crimson-100); color: var(--crimson-700); border-color: var(--crimson-200); }
.badge--solid    { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }

.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Toggle, checkbox, radio ---------- */
.toggle {
  appearance: none; width: 36px; height: 22px; border-radius: 999px;
  background: var(--veil-strong); border: none; position: relative; cursor: pointer;
  transition: background var(--dur-2) var(--ease-out);
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: var(--snow); border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-2) var(--ease-out);
}
.toggle:checked { background: var(--ember); }
.toggle:checked::after { transform: translateX(14px); }
.toggle:focus-visible { box-shadow: var(--ring); outline: none; }

.checkbox {
  appearance: none; width: 18px; height: 18px;
  background: var(--snow); border: 1.5px solid var(--veil-strong); border-radius: 4px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  flex-shrink: 0;
}
.checkbox:checked { background: var(--ember); border-color: var(--ember); }
.checkbox:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg) translate(1px, -1px); }
.checkbox:focus-visible { box-shadow: var(--ring); outline: none; }

.radio {
  appearance: none; width: 18px; height: 18px;
  background: var(--snow); border: 1.5px solid var(--veil-strong); border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
}
.radio:checked { border: 6px solid var(--ember); }
.radio:focus-visible { box-shadow: var(--ring); outline: none; }

/* ---------- Menu ---------- */
.menu {
  background: var(--snow);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 220px;
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  font-size: 14px; color: var(--ink-900);
  cursor: pointer;
}
.menu-item:hover { background: var(--mist); }
.menu-item .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }
.menu-sep { height: 1px; background: var(--border); margin: 6px -6px; }

/* ---------- Avatar ---------- */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--plum); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}