/* ============================================================
   Let's Vibe — Component layer
   Minimal, framework-free building blocks. Copy what you need;
   every value resolves from tokens.css.
   ============================================================ */

/* ---- Signature: the breathing orb -------------------------
   The one element Let's Vibe is remembered by. Use it once,
   large, as an anchor — a hero, a loading state, an AI avatar.
   Never decoratively repeated.                                */
.lv-orb {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--grad-orb);
  box-shadow: 0 18px 50px -18px rgba(46,64,52,.55), inset 0 -8px 18px rgba(34,48,40,.35);
  animation: lv-breathe var(--breathe) ease-in-out infinite;
}
@keyframes lv-breathe {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.06); filter: brightness(1.08); }
}

/* ---- Buttons ----------------------------------------------
   Primary = CTA gradient (--grad-cta, reserved for actions). Spotlight = citrine gradient (one per screen).
   Ghost = quiet. All pill-shaped.                             */
.lv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-small); font-weight: 700;
  padding: 11px 20px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.lv-btn:active { transform: translateY(1px); }
.lv-btn--sm { padding: 8px 15px; font-size: var(--fs-caption); }

.lv-btn--primary { background: var(--grad-cta); color: var(--on-cta); text-shadow: var(--cta-shadow); }
.lv-btn--primary:hover { filter: brightness(1.12); }
/* Active (pressed): presses in and darkens. Applies to every CTA, including .lv-btn--on-dark. */
.lv-btn--primary:active, .lv-btn--on-dark:active { filter: brightness(.84); transform: translateY(1px) scale(.97); }
.lv-btn[aria-expanded="true"], .lv-btn[aria-pressed="true"] { filter: brightness(.84); }
.lv-btn:disabled, .lv-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
/* Links and buttons over dark surfaces use the on-dark CTA pair */
.lv-btn--on-dark { background: var(--grad-cta-on-dark); color: var(--on-cta-on-dark); text-shadow: var(--cta-shadow-on-dark); }
.lv-btn--on-dark:hover { filter: brightness(1.06); }

.lv-btn--spotlight {
  background: var(--grad-dawn); color: var(--ink);
  box-shadow: 0 10px 28px -14px rgba(199,162,74,.7);
}
.lv-btn--spotlight:hover { filter: brightness(1.03); }

.lv-btn--ghost {
  background: transparent; color: var(--ink-soft);
  border-color: var(--line);
}
.lv-btn--ghost:hover { border-color: var(--sage); color: var(--pine); }

/* ---- Chips & category tags --------------------------------
   Use the category color to carry a modality's family.        */
.lv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption); font-weight: 600;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink-soft);
}
.lv-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  color: #fff;
}
.lv-tag--mind   { background: var(--cat-mind); }
.lv-tag--body   { background: var(--cat-body); }
.lv-tag--energy { background: var(--cat-energy); color: #2a2410; }
.lv-tag--spirit { background: var(--cat-spirit); }
.lv-tag--heart  { background: var(--cat-heart); }

/* ---- Card -------------------------------------------------- */
.lv-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}

/* ---- Media with gradient fallback -------------------------
   Always layer photos OVER a brand gradient, so a missing or
   slow image still reads as intentional. Set the image inline:
     <div class="lv-media lv-media--sage"
          style="background-image:url(...), var(--grad-sage)"></div>
   The gradient is the background-color/last layer; supply the
   image as the first background-image layer.                  */
.lv-media {
  border-radius: var(--r-md);
  background-size: cover;
  background-position: center;
  background-color: var(--sage);
}
.lv-media--sage { background-image: var(--grad-sage); }
.lv-media--pine { background-image: var(--grad-pine); }
.lv-media--dawn { background-image: var(--grad-dawn); }

/* ---- On-dark scrim for text over imagery ------------------ */
.lv-scrim {
  background: linear-gradient(180deg, rgba(27,39,30,0) 38%, rgba(27,39,30,.85) 100%);
  color: var(--on-dark);
}