/* Примитивы: анатомия shadcn, но без Tailwind и React.
   Вариант и размер — в data-атрибутах, поэтому разметка одинакова в Askama-шаблонах и в React:
   <a class="btn" data-variant="outline" data-size="sm">…</a> */

/* ═══════════════════ Button ═══════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  height: var(--h-md);
  padding: 0 var(--px-md);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: 600 var(--t-sm) / 1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--surface-3); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-shadow); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn[data-variant="default"] { background: var(--accent); color: var(--accent-fg); }
.btn[data-variant="default"]:hover { background: var(--accent-hover); }
/* Вспомогательная кнопка: без заливки, с заметной обводкой основным цветом. */
.btn[data-variant="outline"] { background: transparent; border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-2); }
.btn[data-variant="outline"]:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.btn[data-variant="ghost"] { background: transparent; color: var(--text-2); }
.btn[data-variant="ghost"]:hover { background: var(--surface-2); color: var(--text); }

.btn[data-size="sm"] { height: var(--h-sm); padding: 0 var(--px-sm); font-size: var(--t-xs); }
.btn[data-size="lg"] { height: var(--h-lg); padding: 0 var(--px-lg); font-size: var(--t-base); }
.btn > svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ═══════════════════ Badge ═══════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--muted);
  font: 500 11px / 1 var(--font-text);
  white-space: nowrap;
  vertical-align: middle;
}
.badge[data-variant="accent"] { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.badge[data-variant="vip"] { border-color: var(--vip-line); color: var(--vip); background: var(--vip-soft); }
.badge[data-variant="ok"] { border-color: #14532d; color: var(--ok); background: var(--ok-soft); }
.badge[data-variant="info"] { border-color: #1e3a5f; color: var(--info); background: var(--info-soft); }

/* ═══════════════════ Card ═══════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--px-md);
}

/* ═══════════════════ Chip (ссылка-фильтр) ═══════════════════ */
.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-2);
  font: 500 var(--t-xs) / 1 var(--font-text);
  text-decoration: none;
  transition: border-color .15s, color .15s, background-color .15s;
}
.chip:hover { border-color: var(--accent-line); color: var(--accent-text); }
.chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* ═══════════════════ Input ═══════════════════ */
.input {
  height: var(--h-md);
  width: 100%;
  padding: 0 var(--px-sm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  font: var(--t-sm) var(--font-text);
}
.input:focus-visible { outline: none; border-color: var(--accent-line); box-shadow: var(--ring-shadow); }