/* =====================================================
   TAKO THEME — Cosmic Purple Glow
   Load this AFTER your base CSS.
   ===================================================== */

/* Color system */
:root {
  --tako-bg: #0b0a12;
  --tako-ink: #0f0b1f;
  --tako-white: #ffffff;
  --tako-purple-100: #ede9fe;
  --tako-purple-200: #ddd6fe;
  --tako-purple-300: #c4b5fd;
  --tako-purple-400: #a78bfa;
  --tako-purple-500: #8b5cf6;
  --tako-purple-600: #7c3aed;
  --tako-purple-700: #6d28d9;
  --tako-purple-800: #5b21b6;
  --tako-purple-900: #4c1d95;
  --tako-cyan-500: #22d3ee;
  --tako-shadow: 0 0 15px rgba(139, 92, 246, .55), 0 0 35px rgba(168, 85, 247, .35);
}

/* Global accents */
body {
  accent-color: var(--tako-purple-500);
}
a {
  color: var(--tako-purple-600);
  text-decoration: underline;
}
a:hover {
  color: var(--tako-purple-400);
  text-decoration-thickness: 2px;
}

/* Panels / cards */
.item-about,
.tokenomics__body,
.join__body,
.how__body,
.footer__body,
.hero__body {
  box-shadow: 0 .5rem 0 0 #000, 0 0 40px rgba(124, 58, 237, .15);
  background-color: #fff;
}

/* Headings — unified glow style */
.item-about__body-info h2,
.tokenomics__title span,
.join__title,
.item-how__num {
  color: var(--tako-purple-500);
  -webkit-text-stroke-width: .08em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  text-shadow: var(--tako-shadow);
}

/* Remove any leftover fake backdrop words */
.item-about__body-info h2::before,
.tokenomics__title span::before,
.join__title::before,
.item-how__num::before {
  color: rgba(124, 58, 237, .15) !important;
}

/* Buttons */
.btn,
.join__button,
.header__button,
.cta,
a.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.3rem;
  border-radius: 2rem;
  border: .25rem solid #000;
  font-family: "Beautiful Freak Bold", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1;
  color: var(--tako-white);
  background: linear-gradient(180deg, var(--tako-purple-500), var(--tako-purple-700));
  box-shadow: 0 .375rem 0 0 #000, 0 0 35px rgba(168, 85, 247, .35);
  transition: transform .12s ease, box-shadow .12s ease, letter-spacing .12s ease;
  -webkit-text-stroke-width: .06em;
  -webkit-text-stroke-color: #000;
  text-decoration: none;
}
.btn:hover,
.join__button:hover,
.header__button:hover,
.cta:hover,
a.button:hover {
  transform: translateY(-2px);
  letter-spacing: .02em;
  box-shadow: 0 .5rem 0 0 #000, 0 0 45px rgba(139, 92, 246, .55);
}
.btn:active,
.join__button:active {
  transform: translateY(0);
}

/* Outline variant */
.btn--outline {
  background: #fff;
  color: var(--tako-purple-700);
  box-shadow: 0 .375rem 0 0 #000, inset 0 0 0 .25rem var(--tako-purple-600);
}

/* Badges / chips */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: .1875rem solid #000;
  background: linear-gradient(180deg, var(--tako-purple-300), var(--tako-purple-500));
  color: #fff;
  -webkit-text-stroke: .04em #000;
  text-shadow: var(--tako-shadow);
}

/* Lists inside panels */
.item-about__body-info ul li::marker {
  color: var(--tako-purple-600);
}

/* Section-specific polish */
.tokenomics {
  background-blend-mode: multiply;
}
.tokenomics__items {
  background-color: #fff;
  box-shadow: 0 .375rem 0 0 #000, 0 0 20px rgba(124,58,237,.15);
}
.tokenomics__item span:nth-child(1) {
  color: var(--tako-purple-600);
}

/* Hero accents if present */
.hero__title, .hero__subtitle {
  text-shadow: var(--tako-shadow);
}

/* Utility glows */
.glow-soft   { text-shadow: 0 0 12px rgba(168,85,247,.45); }
.glow-strong { text-shadow: 0 0 22px rgba(139,92,246,.75), 0 0 50px rgba(168,85,247,.55); }
.border-purple { border-color: var(--tako-purple-700) !important; }
.text-purple  { color: var(--tako-purple-600) !important; }
.bg-purple    { background: linear-gradient(180deg, var(--tako-purple-500), var(--tako-purple-800)) !important; color: #fff !important; }

/* About TAKO — ensure no duplicate backdrop word */
.item-about__body-info h2::before { content: none !important; }