/* =====================================================================
   07. buttons.css — design.md: pill (button-primary), ghost pill,
   dark utility (8px), active = scale(.95), soya yoʻq
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: var(--ls-body);
  line-height: 1;
  min-height: 44px;                       /* touch target */
  padding: 11px 22px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: scale(.95); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .ico { margin-block: -2px; }

/* ---------- button-primary ---------- */
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover { background: var(--primary-focus); }

/* ---------- button-secondary-pill (ghost) ---------- */
.btn-secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary:hover { background: var(--primary-soft); }

/* ---------- matnli ---------- */
.btn-ghost {
  background: transparent;
  color: var(--ink-muted-80);
}
.btn-ghost:hover { background: rgba(0, 0, 0, .04); color: var(--ink); }

/* ---------- button-dark-utility (Kirish, Bag) ---------- */
.btn-dark {
  background: var(--ink);
  color: var(--body-on-dark);
  font-size: var(--fs-sm);
  letter-spacing: -0.016em;
  min-height: 36px;
  padding: 8px 15px;
  border-radius: var(--r-sm);
}
.btn-dark:hover { background: #3a3a3c; }

/* ---------- qorongʻi plitkada ---------- */
.btn-light {
  background: transparent;
  color: var(--body-on-dark);
  border-color: rgba(255, 255, 255, .55);
}
.btn-light:hover { background: rgba(255, 255, 255, .1); }

.btn-white {
  background: var(--canvas);
  color: var(--primary);
}
.btn-white:hover { background: var(--pearl); }

/* aksent tugma — baribir yagona yashil (design: ikkinchi aksent yoʻq) */
.btn-accent { background: var(--primary); color: var(--on-primary); }
.btn-accent:hover { background: var(--primary-focus); }

/* ---------- O'lchamlar ---------- */
.btn-sm {
  font-size: var(--fs-sm);
  letter-spacing: -0.016em;
  min-height: 36px;
  padding: 8px 15px;
}
.btn-lg {
  font-size: 18px;
  min-height: 48px;
  padding: 14px 28px;
}
.btn-block { width: 100%; }

/* ---------- text-link (strelkali havola) ---------- */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-md);
  color: var(--primary);
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- configurator-option-chip (filtr) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: var(--fs-sm);
  letter-spacing: -0.016em;
  padding: 10px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline-strong);
  background: var(--canvas);
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.filter-btn:hover { border-color: var(--ink-muted-48); }
.filter-btn:active { transform: scale(.95); }
.filter-btn.is-active {
  border: 2px solid var(--primary-focus);
  padding: 9px 15px;
  color: var(--primary-ink);
  background: var(--primary-soft);
  font-weight: 600;
}