/* ===== SMWF Pill Buttons (token-aware) ===== */

@media (prefers-reduced-motion: reduce) {
  .smwf-pill {
    transition: none !important;
  }
}

.smwf-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;

  background: var(--smwf-pill);
  /* soft Desert Sand tint */
  color: var(--smwf-accent);
  /* Warm Sage text */
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);

  transition: transform .15s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.smwf-pill:hover {
  transform: translateY(-1px);
  background: var(--smwf-donate);
  /* Burnt Sienna */
  border-color: rgba(0, 0, 0, .08);
  color: #fff;
  /* requested: white text */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}

.smwf-pill:focus-visible {
  outline: 3px solid var(--smwf-ring);
  /* Golden Clay focus */
  outline-offset: 2px;
}

/* Variants (mapped to global tokens) */
.smwf-pill--brand {
  background: var(--smwf-donate);
  color: #fff;
  border-color: transparent;
}

.smwf-pill--accent {
  background: var(--smwf-accent);
  color: #fff;
  border-color: transparent;
}

.smwf-pill--dark {
  background: var(--smwf-dark);
  color: #fff;
  border-color: rgba(255, 255, 255, .15);
}

.smwf-pill--ghost {
  background: transparent;
  color: var(--smwf-dark);
  border-color: rgba(0, 0, 0, .15);
}

.smwf-pill--ghost:hover {
  background: var(--smwf-donate);
  color: #fff;
  border-color: transparent;
}

/* Size modifiers */
.smwf-pill--sm {
  padding: .4rem .8rem;
  font-weight: 600;
}

.smwf-pill--lg {
  padding: .7rem 1.1rem;
  font-weight: 800;
}

/* Icon sizing (inline SVGs or <img>) */
.smwf-pill svg,
.smwf-pill img {
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Pills (filters/quick links)
   v1.1 – 2025-10-24
   Author: SMWF System Styles
   Notes: Aligns hover/focus with header CTAs
--------------------------------------------------------------------------- */

/* Base pill */
.smwf-pill,
.smwf-pills a,
.smwf-pills button {
  display: inline-block;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--smwf-border, #e5e7eb);
  background: var(--smwf-pill-bg, #fff);
  color: var(--smwf-ink, #1f2937);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease, border-color .2s ease;
  cursor: pointer;
}

/* Hover/focus states (match CTA feel) */
.smwf-pill:hover,
.smwf-pills a:hover,
.smwf-pills button:hover,
.smwf-pill:focus-visible,
.smwf-pills a:focus-visible,
.smwf-pills button:focus-visible {
  background: color-mix(in oklab, var(--smwf-accent, #0f4c81) 8%, #fff);
  border-color: color-mix(in oklab, var(--smwf-accent, #0f4c81) 28%, #e5e7eb);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .10);
  transform: translateY(-1px);
  outline: 3px solid var(--smwf-ring, rgba(218, 165, 32, .35));
  outline-offset: 2px;
}

/* Active/pressed */
.smwf-pill:active,
.smwf-pills a:active,
.smwf-pills button:active {
  transform: translateY(0);
  filter: brightness(.97);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* Selected/active pill (use .is-active on current) */
.smwf-pill.is-active,
.smwf-pills .is-active {
  background: var(--smwf-accent, #0f4c81);
  color: #fff;
  border-color: var(--smwf-accent, #0f4c81);
}

/* Outline style variant (optional) */
.smwf-pill--outline {
  background: transparent;
  color: var(--smwf-ink, #1f2937);
}

.smwf-pill--outline.is-active,
.smwf-pill--outline:hover,
.smwf-pill--outline:focus-visible {
  background: var(--smwf-accent, #0f4c81);
  color: #fff;
  border-color: var(--smwf-accent, #0f4c81);
}

/* Size variants (optional) */
.smwf-pill--sm {
  padding: 0.35rem 0.7rem;
  font-weight: 700;
}

.smwf-pill--lg {
  padding: 0.6rem 1.05rem;
  font-weight: 800;
}

/* Group container (spacing) */
.smwf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}