/*
 * Токены дизайн-системы VoteMenu: общая статика обоих сайтов (resources/web подмешивает
 * convention.web.app, отдаётся под /assets/). Разметка экранов знает только
 * var(--vm-*) — конкретные цвета живут здесь, в одном месте на оба приложения.
 */
:root {
  --vm-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --vm-primary: #00a34a;
  --vm-on-primary: #ffffff;
  --vm-surface: #ffffff;
  --vm-surface-variant: #f1f4ee;
  --vm-on-surface: #17211b;
  --vm-on-surface-muted: #6d7a70;
  --vm-outline: #dce3dc;
  --vm-error: #ba1a1a;

  --vm-radius: 14px;
  --vm-gap: 12px;
}

body.dark.theme {
  --vm-primary: #ff8a5c;
  --vm-on-primary: #4a1602;
  --vm-surface: #1c1b1a;
  --vm-surface-variant: #2a2724;
  --vm-on-surface: #f0ece8;
  --vm-on-surface-muted: #a9a29b;
  --vm-outline: #443f3a;
  --vm-error: #ffb4ab;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: var(--vm-font);
  background: #edf0ea;
  color: var(--vm-on-surface);
}

button,
input,
textarea {
  font-family: inherit;
}

/*
 * Классы удалённой дизайн-системы (:core:ui). Компонентов vm-app-bar / vm-button /
 * vm-empty-state больше нет — экраны верстают шапку, кнопку и пустое состояние обычным HTML,
 * а правила лежат здесь, в одном месте на оба сайта, вместо копии в каждом .component.css.
 */
.bar {
  display: flex;
  align-items: center;
  gap: var(--vm-gap);
  min-height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--vm-outline);
  background: var(--vm-surface);
}

.bar__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.bar__actions {
  margin-left: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--vm-on-surface);
}

.btn--primary {
  background: var(--vm-primary);
  color: var(--vm-on-primary);
}

.btn--outline {
  border-color: var(--vm-outline);
}

.btn--text {
  padding: 0 8px;
  color: var(--vm-primary);
}

.btn.is-full {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
}

.empty__title {
  margin: 0;
  font-weight: 600;
}

.empty__description {
  margin: 0;
  color: var(--vm-on-surface-muted);
}