/* =========================================================
   Shop Dreamy Rooms — Hub UI
   File: /assets/css/hub_ui.css
   Purpose: standardized hub navigation chips across ALL hub pages
   ========================================================= */

/* ---------- Defaults (works even without modifiers) ---------- */
:root{
  /* Shape + typography */
  --hub-chip-radius: 999px;
  --hub-chip-font-size: 14px;
  --hub-chip-font-weight: 750;
  --hub-chip-pad-y: 10px;
  --hub-chip-pad-x: 14px;

  /* Motion */
  --hub-chip-transition: 140ms ease;

  /* Neutral base (brand-friendly) */
  --hub-chip-bg: rgba(81,109,108,.10);
  --hub-chip-bg-hover: rgba(81,109,108,.16);
  --hub-chip-text: #355352;
  --hub-chip-text-hover: #2a4544;
  --hub-chip-border: rgba(17,24,39,.14);

  /* Focus */
  --hub-chip-focus: rgba(81,109,108,.32);
}

/* Container */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Base chip */
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: var(--hub-chip-pad-y) var(--hub-chip-pad-x);
  border-radius: var(--hub-chip-radius);

  font-size: var(--hub-chip-font-size);
  font-weight: var(--hub-chip-font-weight);
  line-height: 1;

  text-decoration:none;
  user-select:none;
  cursor:pointer;
  white-space:nowrap;

  color: var(--hub-chip-text);
  background: var(--hub-chip-bg);
  border: 1px solid var(--hub-chip-border);

  transition:
    transform var(--hub-chip-transition),
    box-shadow var(--hub-chip-transition),
    background var(--hub-chip-transition),
    color var(--hub-chip-transition);
}

.chip:hover{
  background: var(--hub-chip-bg-hover);
  color: var(--hub-chip-text-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(17,24,39,.08);
}

.chip:active{
  transform: translateY(0px);
  box-shadow: none;
}

.chip:focus{ outline:none; }

.chip:focus-visible{
  box-shadow:
    0 0 0 3px var(--hub-chip-focus),
    0 10px 20px rgba(17,24,39,.08);
}

/* Optional: compact variant if you ever need it */
.chip--sm{
  --hub-chip-font-size: 13px;
  --hub-chip-pad-y: 8px;
  --hub-chip-pad-x: 12px;
}

/* =========================================================
   Landmark palette (consistent across every hub page)
   Usage: <a class="chip chip--celestial" ...>Celestial</a>
   ========================================================= */

/* Celestial: moonlight blue + soft lilac */
.chip--celestial{
  --hub-chip-bg: rgba(139, 167, 255, 0.16);
  --hub-chip-bg-hover: rgba(139, 167, 255, 0.24);
  --hub-chip-text: #27325f;
  --hub-chip-text-hover: #1f284f;
  --hub-chip-focus: rgba(139, 167, 255, 0.30);
}

/* Color: bright-but-not-neon spectrum cue */
.chip--color{
  --hub-chip-bg: rgba(67, 198, 172, 0.16);       /* teal-green */
  --hub-chip-bg-hover: rgba(67, 198, 172, 0.24);
  --hub-chip-text: #1c4d44;
  --hub-chip-text-hover: #163f38;
  --hub-chip-focus: rgba(67, 198, 172, 0.30);
}

/* Cotton Candy: pink + lavender */
.chip--cotton{
  --hub-chip-bg: rgba(255, 111, 177, 0.16);
  --hub-chip-bg-hover: rgba(255, 111, 177, 0.24);
  --hub-chip-text: #5a2b44;
  --hub-chip-text-hover: #4a2338;
  --hub-chip-focus: rgba(255, 111, 177, 0.30);
}

/* Cozy: warm oat + cocoa (very friendly) */
.chip--cozy{
  --hub-chip-bg: rgba(214, 176, 132, 0.18);
  --hub-chip-bg-hover: rgba(214, 176, 132, 0.26);
  --hub-chip-text: #4b3320;
  --hub-chip-text-hover: #3f2b1b;
  --hub-chip-focus: rgba(214, 176, 132, 0.30);
}

/* Fruit: peachy landmark (works across fruit family) */
.chip--fruit{
  --hub-chip-bg: rgba(242, 160, 138, 0.18);
  --hub-chip-bg-hover: rgba(242, 160, 138, 0.26);
  --hub-chip-text: #5c2f2a;
  --hub-chip-text-hover: #4f2723;
  --hub-chip-focus: rgba(242, 160, 138, 0.30);
}

/* Gamer: neon-ish but controlled (no harsh green) */
.chip--gamer{
  --hub-chip-bg: rgba(124, 92, 255, 0.16);       /* electric violet */
  --hub-chip-bg-hover: rgba(124, 92, 255, 0.24);
  --hub-chip-text: #2c215e;
  --hub-chip-text-hover: #231b4c;
  --hub-chip-focus: rgba(124, 92, 255, 0.30);
}

/* Holiday: classic festive red, softened */
.chip--holiday{
  --hub-chip-bg: rgba(233, 90, 90, 0.16);
  --hub-chip-bg-hover: rgba(233, 90, 90, 0.24);
  --hub-chip-text: #5a1e1e;
  --hub-chip-text-hover: #4a1818;
  --hub-chip-focus: rgba(233, 90, 90, 0.30);
}

/* Space: deep navy cue (still light surface) */
.chip--space{
  --hub-chip-bg: rgba(70, 98, 170, 0.16);
  --hub-chip-bg-hover: rgba(70, 98, 170, 0.24);
  --hub-chip-text: #1f2b4a;
  --hub-chip-text-hover: #18223b;
  --hub-chip-focus: rgba(70, 98, 170, 0.30);
}

/* Winter: icy blue-gray */
.chip--winter{
  --hub-chip-bg: rgba(141, 190, 215, 0.18);
  --hub-chip-bg-hover: rgba(141, 190, 215, 0.26);
  --hub-chip-text: #1f3a44;
  --hub-chip-text-hover: #182f37;
  --hub-chip-focus: rgba(141, 190, 215, 0.30);
}