/**
 * Frontend component layer (foundation only — no page designs).
 * All values use design tokens.
 */

.kutby-section {
  padding-block: var(--kutby-space-8);
}

.kutby-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--kutby-space-1) var(--kutby-space-2);
  border-radius: var(--kutby-radius-full);
  font-size: var(--kutby-font-size-sm);
  font-weight: var(--kutby-font-weight-semibold);
  background: var(--kutby-color-surface);
  color: var(--kutby-color-text);
  border: var(--kutby-border-width) solid var(--kutby-color-border);
}

.kutby-search-box {
  display: flex;
  gap: var(--kutby-space-2);
  width: 100%;
  max-width: 28rem;
}

.kutby-search-box input {
  flex: 1;
  padding: var(--kutby-space-3) var(--kutby-space-4);
  border: var(--kutby-border-width) solid var(--kutby-color-border);
  border-radius: var(--kutby-radius-md);
  background: var(--kutby-color-bg);
  color: var(--kutby-color-text);
}
