/* ============================================================
   NORIKAI — Component primitives
   Depends on colors_and_type.css tokens.
   ============================================================ */

/* ---------- Buttons ---------- */
.nk-btn {
  font: var(--w-semibold) 14px/1 var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .06s ease;
  -webkit-tap-highlight-color: transparent;
}
.nk-btn:active { transform: translateY(0.5px); }
.nk-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.nk-btn--primary { background: var(--primary); color: var(--on-primary); }
.nk-btn--primary:hover { background: var(--primary-hover); }
.nk-btn--primary:active { background: var(--primary-active); }

.nk-btn--secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.nk-btn--secondary:hover { background: var(--surface-hover); border-color: var(--warm-400); }

.nk-btn--ghost { background: transparent; color: var(--fg); }
.nk-btn--ghost:hover { background: var(--warm-100); }

.nk-btn--accent { background: var(--accent); color: var(--forest-900); }
.nk-btn--accent:hover { background: var(--accent-hover); color: var(--gold-50); }

.nk-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.nk-btn--lg { height: 48px; padding: 0 24px; font-size: 15px; }
.nk-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Input ---------- */
.nk-field { display: flex; flex-direction: column; gap: 6px; }
.nk-field label { font: var(--w-medium) 13px/1.2 var(--font-sans); color: var(--fg-2); }
.nk-input {
  font: var(--w-regular) 15px/1.4 var(--font-sans); color: var(--fg);
  height: 42px; padding: 0 14px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  transition: border-color .16s ease, box-shadow .16s ease;
  width: 100%;
}
.nk-input::placeholder { color: var(--fg-3); }
.nk-input:hover { border-color: var(--warm-400); }
.nk-input:focus { outline: none; border-color: var(--ring); box-shadow: var(--shadow-focus); }
.nk-hint { font: var(--w-regular) 12px/1.4 var(--font-sans); color: var(--fg-3); }

/* ---------- Badge ---------- */
.nk-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: var(--w-semibold) 12px/1 var(--font-sans); letter-spacing: .01em;
  height: 24px; padding: 0 10px; border-radius: var(--r-full);
  border: 1px solid transparent;
}
.nk-badge--neutral { background: var(--warm-100); color: var(--fg-2); border-color: var(--border); }
.nk-badge--primary { background: var(--forest-50); color: var(--forest-700); border-color: var(--forest-100); }
.nk-badge--accent { background: var(--gold-50); color: var(--gold-600); border-color: var(--gold-100); }
.nk-badge--success { background: var(--success-soft); color: var(--success); }
.nk-badge--warning { background: var(--warning-soft); color: var(--warning); }
.nk-badge--error { background: var(--error-soft); color: var(--error); }
.nk-badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ---------- Card ---------- */
.nk-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.nk-card--pad { padding: 20px; }
.nk-card--interactive { transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; cursor: pointer; }
.nk-card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }