/* ============================================================
   TextToolKit v2 — Component Styles
   ============================================================ */

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--fw-medium);
  line-height: 1; border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 10px var(--sp-5); cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap; user-select: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--brand-lime); color: var(--brand-on); border-color: var(--brand-lime);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-lime-hover); border-color: var(--brand-lime-hover); }

.btn-secondary {
  background: var(--surface-tertiary); color: var(--text-primary); border-color: var(--border-default);
}
.btn-secondary:hover:not(:disabled) { background: var(--border-strong); }

.btn-ghost {
  background: transparent; color: var(--text-primary); border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--surface-tertiary); }

.btn-lg { padding: 14px var(--sp-8); font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn-sm { padding: 6px var(--sp-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn-icon { padding: var(--sp-2); width: 36px; height: 36px; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-card);
}
.card:hover { border-color: var(--border-strong); }

.card-compact { padding: var(--sp-4); border-radius: var(--radius-lg); }
.card-featured { border-color: var(--brand-lime-soft); }
.card-flat { background: transparent; border: 1px solid var(--border-soft); box-shadow: none; }

/* ── Badges / Tags ────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-caption); font-weight: var(--fw-medium); line-height: 1;
  padding: 3px var(--sp-2); border-radius: var(--radius-full);
  background: var(--surface-tertiary); color: var(--text-secondary);
}
.badge-lime,
.badge-accent { background: var(--brand-blue-soft); color: var(--brand-blue); }
.badge-blue  { background: rgba(88,166,255,0.15); color: var(--info); }
.badge-amber { background: rgba(210,153,34,0.15); color: var(--warning); }
.badge-red   { background: rgba(248,81,73,0.15); color: var(--danger); }

/* ── Inputs ───────────────────────────────────────────────── */
.input {
  width: 100%; font-family: var(--font-body); font-size: var(--text-body);
  color: var(--text-primary); background: var(--surface-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 10px var(--sp-4); outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.input:focus { border-color: var(--brand-lime); box-shadow: 0 0 0 3px var(--brand-lime-soft); }
.input::placeholder { color: var(--text-muted); }

.input-lg { padding: 12px var(--sp-5); font-size: var(--text-lg); border-radius: var(--radius-lg); }

textarea.input {
  resize: vertical; min-height: 80px;
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal);
}

/* ── Icons (inline SVG) ──────────────────────────────────── */
.icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.icon-sm { width: 12px; height: 12px; }
.icon-lg { width: 24px; height: 24px; }

/* ── Divider ──────────────────────────────────────────────── */
.divider {
  height: 1px; background: var(--border-soft); border: none; margin: var(--sp-6) 0;
}

/* ── Tooltip ──────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  padding: 4px var(--sp-2); border-radius: var(--radius-sm);
  background: var(--text-primary); color: var(--text-inverse);
  font-size: var(--text-caption); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--duration-fast);
}
[data-tooltip]:hover::after { opacity: 1; }