/* tokens.css */




/* =========================================================
   Ekijen Gradient Theme (global)
   ========================================================= */

:root {
  /* pulled from your purple/blue reference vibe */
  --ekg-1: #5a41a1; /* deep indigo */
  --ekg-2: #734ae2; /* primary purple */
  --ekg-3: #8f93e3; /* soft bluish-lilac */

  --ekg-grad: linear-gradient(135deg, var(--ekg-1) 0%, var(--ekg-2) 52%, var(--ekg-3) 100%);
  --ekg-grad-soft: linear-gradient(
    135deg,
    rgba(90, 65, 161, 0.14) 0%,
    rgba(115, 74, 226, 0.14) 52%,
    rgba(143, 147, 227, 0.14) 100%
  );

  --ekg-glow: 0 0 0 2px rgba(115, 74, 226, 0.25), 0 18px 40px rgba(90, 65, 161, 0.16);
}

.dark {
  --ekg-glow: 0 0 0 2px rgba(143, 147, 227, 0.28), 0 18px 40px rgba(115, 74, 226, 0.18);
}

/* ---- Make Tailwind "primary" classes feel like the gradient theme ---- */
.text-primary {
  color: var(--ekg-2) !important;
}

.bg-primary {
  background-image: var(--ekg-grad) !important;
  background-color: transparent !important;
}

.border-primary {
  border-color: var(--ekg-2) !important;
}

/* Soft primary backgrounds used in your HTML */
.bg-primary\/5 {
  background-image: var(--ekg-grad-soft) !important;
  background-color: transparent !important;
}
.dark .dark\:bg-primary\/10 {
  background-image: var(--ekg-grad-soft) !important;
  background-color: transparent !important;
}
.border-primary\/10 {
  border-color: rgba(115, 74, 226, 0.18) !important;
}

/* Buttons that already use bg-primary */
button.bg-primary,
a.bg-primary {
  box-shadow: 0 10px 24px rgba(115, 74, 226, 0.18);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
button.bg-primary:hover,
a.bg-primary:hover {
  filter: brightness(1.04) saturate(1.06);
  box-shadow: 0 14px 32px rgba(115, 74, 226, 0.24);
}
button.bg-primary:active,
a.bg-primary:active {
  transform: translateY(1px);
}
button.bg-primary:focus-visible,
a.bg-primary:focus-visible {
  outline: none;
  box-shadow: var(--ekg-glow);
}

/* ---- Marketplace hover aura (products/sellers/categories) ---- */
#mk-home-top-products-grid [data-product-slug],
#mk-home-trending-products-grid [data-product-slug],
#mk-attraction-products-grid [data-product-slug] {
  border-radius: 16px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
#mk-home-top-products-grid [data-product-slug]:hover,
#mk-home-trending-products-grid [data-product-slug]:hover,
#mk-attraction-products-grid [data-product-slug]:hover {
  transform: translateY(-2px);
  box-shadow: var(--ekg-glow);
}

#mk-home-top-sellers-strip > div,
#mk-attraction-sellers-strip > div {
  transition: transform 160ms ease, box-shadow 160ms ease;
}
#mk-home-top-sellers-strip > div:hover,
#mk-attraction-sellers-strip > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--ekg-glow);
}

#mk-categories-chips button {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
#mk-categories-chips button:hover {
  transform: translateY(-1px);
  box-shadow: var(--ekg-glow);
  background-image: var(--ekg-grad-soft);
}

/* Banner dots (we'll toggle .is-active from JS) */
[data-banner-dots] button {
  height: 6px;
  width: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  transition: all 160ms ease;
}
[data-banner-dots] button.is-active {
  width: 18px;
  background-image: var(--ekg-grad);
  background-color: transparent;
  opacity: 1;
}