/*
  chips.css
  Universal Chip Styling (shared across hub pages + theme pages)

  How to add a new chip:
    1) Add an entry to chips_registry.json (slug/label/href/order)
    2) Add a matching .chip--<slug> block below

  Do NOT style chips inside individual page templates.
*/

/* Layout */
.chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

/* Base chip: now SOLID so it stays readable over busy hero images */
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-decoration:none;
  user-select:none;

  /* Neutral base so chips remain readable across themes */
  color: var(--link, #516d6c);

  /* SOLID (opaque) neutral background */
  background: #f7f4ee;
  border: 1px solid rgba(17, 24, 39, 0.18);

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

.chip:hover{
  background: #f1ede4;
  border-color: rgba(17, 24, 39, 0.24);
  transform: translateY(-1px);
}

.chip:focus-visible{
  outline: 2px solid rgba(81, 109, 108, 0.35);
  outline-offset: 2px;
}

/*
  Variant blocks
  Solid backgrounds (opaque) to avoid fighting hero imagery.
  Keep these recognizable but still “soft SDR”.
*/

/* === chip: celestial === */
.chip--celestial{
  background: #f2efff;
  border-color: rgba(124, 92, 255, 0.40);
}
.chip--celestial:hover{
  background: #e9e3ff;
  border-color: rgba(124, 92, 255, 0.55);
}

/* === chip: color === */
.chip--color{
  background: #fff2db;
  border-color: rgba(255, 170, 0, 0.42);
}
.chip--color:hover{
  background: #ffe7c0;
  border-color: rgba(255, 170, 0, 0.58);
}

/* === chip: cotton candy ===
   IMPORTANT:
   - Keep BOTH classnames supported so existing pages don’t break:
     .chip--cotton (legacy) and .chip--cotton-candy (newer)
*/
.chip--cotton,
.chip--cotton-candy{
  background: #ffe6f1;
  border-color: rgba(255, 105, 180, 0.45);
}
.chip--cotton:hover,
.chip--cotton-candy:hover{
  background: #ffd3e8;
  border-color: rgba(255, 105, 180, 0.62);
}

/* === chip: cozy === */
.chip--cozy{
  background: #f3e7dc;
  border-color: rgba(160, 120, 80, 0.45);
}
.chip--cozy:hover{
  background: #ead9c8;
  border-color: rgba(160, 120, 80, 0.62);
}

/* === chip: fruit === */
.chip--fruit{
  background: #ffe4de;
  border-color: rgba(255, 99, 71, 0.45);
}
.chip--fruit:hover{
  background: #ffd2c9;
  border-color: rgba(255, 99, 71, 0.62);
}

/* === chip: gamer === */
.chip--gamer{
  background: #ddfff3;
  border-color: rgba(0, 255, 180, 0.40);
}
.chip--gamer:hover{
  background: #c8ffe9;
  border-color: rgba(0, 255, 180, 0.58);
}

/* === chip: holiday === */
.chip--holiday{
  background: #ffe2e2;
  border-color: rgba(220, 38, 38, 0.42);
}
.chip--holiday:hover{
  background: #ffd0d0;
  border-color: rgba(220, 38, 38, 0.58);
}

/* === chip: space === */
.chip--space{
  background: #e3ebff;
  border-color: rgba(30, 64, 175, 0.45);
}
.chip--space:hover{
  background: #d2deff;
  border-color: rgba(30, 64, 175, 0.62);
}

/* === chip: winter === */
.chip--winter{
  background: #e7f2ff;
  border-color: rgba(59, 130, 246, 0.45);
}
.chip--winter:hover{
  background: #d6eaff;
  border-color: rgba(59, 130, 246, 0.62);
}

/* === chip: valentine's ===
   Using "valentines" slug (common), plus a "valentine" alias to avoid future mismatch.
*/
.chip--valentines,
.chip--valentine{
  background: #ffe3ec;
  border-color: rgba(255, 111, 174, 0.50);
}
.chip--valentines:hover,
.chip--valentine:hover{
  background: #ffd0e0;
  border-color: rgba(255, 111, 174, 0.68);
}

/* === chip: moodcore === */
.chip--moodcore{
  background: #e3f0ee;
  border-color: rgba(81, 109, 108, 0.46);
}
.chip--moodcore:hover{
  background: #d3e7e4;
  border-color: rgba(81, 109, 108, 0.62);
}

/* === chip: explorer === */
.chip--explorer{
  background: #eef5e7; /* soft trail-green */
  border-color: rgba(34, 197, 94, 0.42);
}
.chip--explorer:hover{
  background: #e2efda;
  border-color: rgba(34, 197, 94, 0.60);
}

/* === chip: novelty fruit ===
   Slug is "novelty-fruit" (hyphenated) per registry.
*/
.chip--novelty-fruit{
  background: #fff0dd; /* sunny citrus cream */
  border-color: rgba(249, 115, 22, 0.45);
}
.chip--novelty-fruit:hover{
  background: #ffe5c9;
  border-color: rgba(249, 115, 22, 0.62);
}