/* ============================================================
   components.css — общие компоненты (кнопочная система).
   Подключается после tokens.css на всех страницах.
   Единственный источник .button* — правки только здесь.
   ============================================================ */

/* ---------- Кнопки ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-weight: 600;
  font-size: var(--text-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}
.button-primary {
  background: var(--teal-700);
  color: var(--white);
}
.button-primary:hover {
  background: var(--teal-500);
  color: var(--white);
}
.button-secondary {
  background: var(--lime-500);
  color: var(--teal-900);
}
.button-secondary:hover {
  background: var(--lime-600);
}
.button-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line-strong);
}
.button-ghost:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
}
.button-small {
  min-height: calc(var(--touch-target) - 8px);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}
.button:disabled {
  cursor: default;
  opacity: 0.55;
}

/* ---------- Иконки (спрайт assets/icons.svg, Lucide) ---------- */
.icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button .icon {
  width: 18px;
  height: 18px;
}

/* ---------- Состояние загрузки кнопки ---------- */
.button[data-loading] {
  pointer-events: none;
  opacity: 0.82;
}
.button[data-loading]::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin 800ms linear infinite;
}
@keyframes button-spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .button[data-loading]::before {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.55;
  }
}

/* ---------- Числа-акценты (рукописные цифры) ---------- */
/* Caveat покрывает только латиницу и цифры — класс вешаем на
   чисто числовые фрагменты (номера карточек, стадий, статистика).
   Обводка цветом текста добирает жирность: 700 — максимум Caveat,
   а рядом с жирным текстом штрихи выглядят тоньше (фидбек владельца).
   Chromium не синтезирует bold поверх статического 700 — проверено замером. */
.num-hand {
  font-family: var(--font-hand);
  font-weight: 700;
  -webkit-text-stroke: 0.035em currentColor;
}

/* ---------- Маркированные списки с зубом (единый стиль на всех страницах) ---------- */
/* Иконка зуба — первый элемент li: статически в HTML или из JS (fillList). */
.icon-tooth {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 0.22em;
  color: var(--accent);
}
.tooth-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.tooth-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

/* ---------- Переключатель темы ---------- */
/* Иконка показывает действие: луна — включить тёмную, солнце — светлую.
   Состояние держится на data-theme="dark" у <html> (theme.js). */
.theme-toggle {
  width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 0;
}
.theme-toggle .icon-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  display: inline-block;
}