/* Pills & buttons - in the Figma system a "button" is a pill (11px / 600, 10x6 padding). */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size: var(--fs-11);
  font-weight: 600;
  line-height: var(--lh);
  white-space: nowrap;
  border: 0;
  text-align: center;
}

.pill svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* ---- Tones ---- */
.pill--soft { background: var(--accent-soft-bg); color: var(--accent-text); }
.pill--status { background: var(--accent-status-bg); color: var(--accent-text); }
.pill--progress { background: var(--accent-progress-bg); color: var(--accent-text); }
.pill--ghost { background: var(--pill-ghost-bg); color: var(--pill-ghost-text); }
.pill--time { background: var(--pill-time-bg); color: var(--pill-time-text); }
.pill--cyan { background: var(--cyan-soft-bg); color: var(--cyan); }
.pill--lab { background: var(--cyan-lab-bg); color: var(--cyan); }
.pill--sky { background: var(--sky-soft-bg); color: var(--sky); }
.pill--primary { background: var(--accent); color: var(--on-accent); }
.pill--secondary { background: var(--pill-bg); color: var(--pill-strong-text); }
.pill--day { background: var(--day-accent, var(--day-teal)); color: var(--on-day); }
.pill--warn { background: var(--callout-warn-bg); color: var(--callout-warn-label); }
.pill--danger { background: var(--callout-danger-bg); color: var(--callout-danger-label); }
.pill--ok { background: var(--callout-key-bg); color: var(--callout-key-label); }

.pill--num { min-width: 33px; }

/* ---- Interactive ---- */
.pill--interactive,
a.pill,
button.pill {
  cursor: pointer;
  transition: filter var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

a.pill:hover,
button.pill:hover:not(:disabled) {
  filter: brightness(1.14);
  transform: translateY(-1px);
}

a.pill:active,
button.pill:active:not(:disabled) {
  transform: translateY(0);
  filter: brightness(1);
}

a.pill:focus-visible,
button.pill:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

button.pill:disabled,
button.pill[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

button.pill[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-day);
}

/* Large touch-friendly variant (forms, settings) */
.pill--lg {
  padding: 10px 16px;
  font-size: var(--fs-12);
}

.pill--danger-solid {
  background: #e11d48;
  color: #fff;
}

.pill--block {
  display: flex;
  width: 100%;
}

@media (pointer: coarse) {
  a.pill,
  button.pill {
    min-height: 40px;
    padding: 10px 14px;
  }
}

/* Icon-only round button (menu, close, copy) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--pill-bg);
  color: var(--pill-strong-text);
  transition: filter var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.icon-btn:hover {
  filter: brightness(1.15);
}

.icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}