/*
  Atoms: small reusable primitives. Context-free.
*/

/* ---- Button ---- */

.button {
  display: inline-block;
  padding: .6rem 1rem;
  background: var(--brand);
  color: white;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  transition: background var(--duration-normal), transform var(--duration-fast);
}
.button:hover  { background: var(--brand-dark); color: white; }
.button:active { transform: translateY(1px); }
.button[aria-disabled="true"] {
  background: var(--ink-faint);
  cursor: not-allowed;
  pointer-events: none;
}

/* Size variants */
.button.--sm { padding: .35rem .7rem; font-size: .82rem; }
.button.--md { padding: .55rem .95rem; font-size: .95rem; }

/* ---- Badge ---- */

.badge {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.6;
  background: rgba(0, 0, 0, .06);
  color: rgba(0, 0, 0, .65);
}

/* ---- Tag: like badge but inline with text ---- */

.tag {
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--ink-muted);
}

/* ---- Icon: wrapper for emoji or svg used decoratively ---- */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
.icon.--lg { font-size: 1.75rem; }

/* ---- Circular nav button (used in carousels, modals) ---- */

.round-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--brand);
  font-size: 1.6rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  font-family: var(--font-ui);
  transition: background var(--duration-normal), transform var(--duration-fast);
}
.round-button:hover  { background: white; }
.round-button:active { transform: scale(.95); }