/* TokenSection — ported from src/components/TokenSection.tsx.
   Static marketing section (no interactivity in the source).
   Tailwind utilities translated to real CSS. Mobile-first;
   md = 768px, lg = 1024px. */

.token {
  position: relative;
  padding-block: 8rem; /* py-32 */
}

/* absolute inset-0 dot-pattern opacity-20 */
.token__dots {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}

/* relative z-10 max-w-7xl mx-auto px-6 lg:px-8 */
.token__inner {
  position: relative;
  z-index: 10;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* grid lg:grid-cols-2 gap-20 items-start */
.token__grid {
  display: grid;
  gap: 5rem; /* gap-20 */
  align-items: start;
}

/* ── Left column ── */
/* space-y-8 lg:sticky lg:top-32 */
.token__intro > * + * { margin-top: 2rem; } /* space-y-8 */

/* inline-block text-[10px] font-mono uppercase tracking-[0.3em] accent mb-2 */
.token__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

/* text-4xl md:text-5xl font-serif italic leading-[1.05] */
.token__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-weight: 700;
  font-size: 2.25rem; /* text-4xl */
  line-height: 1.05;
  margin: 0;
}

/* font-mono not-italic accent */
.token__title-ticker {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--color-accent);
}

/* text-lg text-muted leading-relaxed */
.token__lede {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  line-height: 1.625;
  margin: 0;
}

/* grid grid-cols-2 gap-4 pt-4 */
.token__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 1rem;
}

/* bg-surface border border-border p-5 */
.token__spec {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
}

/* text-[10px] font-mono uppercase tracking-[0.2em] text-dim */
.token__spec-label {
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
}

/* text-xl font-mono font-bold mt-2 accent */
.token__spec-value {
  font-size: 1.25rem;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-top: 0.5rem;
  color: var(--color-accent);
}

/* text-[11px] text-dim */
.token__spec-sub {
  font-size: 11px;
  color: var(--color-text-dim);
}

/* ── Right column ── */
/* space-y-8 */
.token__mechanisms > * + * { margin-top: 2rem; }

/* bg-surface border border-border p-8 */
.token__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem;
}

/* font-mono text-sm font-bold uppercase tracking-wider mb-6 */
.token__card-title {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking-wider */
  margin: 0 0 1.5rem;
}
.token__card-title--accent { color: var(--color-accent); }
.token__card-title--warn   { color: var(--color-warn); }
/* the Burn dynamics card's title uses mb-4 instead of mb-6 */
.token__card-title--purple { color: var(--color-accent); margin-bottom: 1rem; }

/* ── Fee routing ── */
/* space-y-4 */
.token__fees > * + * { margin-top: 1rem; }

/* flex items-center gap-4 */
.token__fee {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* w-14 font-mono text-lg font-bold accent */
.token__fee-pct {
  width: 3.5rem;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* flex-1 */
.token__fee-body { flex: 1 1 0%; }

/* text-sm font-medium */
.token__fee-label {
  font-size: 0.875rem;
  font-weight: 500;
}

/* text-xs text-dim */
.token__fee-dest {
  font-size: 0.75rem;
  color: var(--color-text-dim);
}

/* h-1 bg-accent/20 — width set inline per fee */
.token__fee-bar {
  height: 0.25rem;
  background: rgba(0, 229, 255, 0.2);
}

/* h-full bg-accent w-full */
.token__fee-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--color-accent);
}

/* ── Buyback & Burn flow ── */
/* space-y-3 */
.token__flow > * + * { margin-top: 0.75rem; }

/* flex items-start gap-4 */
.token__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* flex flex-col items-center flex-shrink-0 */
.token__step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* w-8 h-8 flex items-center justify-center font-mono text-[11px] font-bold
   border border-warn/30 text-warn */
.token__step-num {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255, 102, 68, 0.3);
  color: var(--color-warn);
}

/* w-px h-4 bg-warn/20 */
.token__step-line {
  width: 1px;
  height: 1rem;
  background: rgba(255, 102, 68, 0.2);
}

/* text-sm text-muted pt-1.5 */
.token__step-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding-top: 0.375rem;
  margin: 0;
}

/* mt-6 pt-4 border-t border-border */
.token__card-note {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* text-xs text-dim font-mono */
.token__card-note-text {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  font-family: var(--font-mono);
  margin: 0;
}

/* ── Burn dynamics ── */
/* text-sm text-muted leading-relaxed */
.token__burn-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.625;
  margin: 0;
}

/* ── Responsive ── */
@media (min-width: 768px) {
  .token__title { font-size: 3rem; } /* md:text-5xl */
}

@media (min-width: 1024px) {
  .token { padding-block: 10rem; } /* lg:py-40 */
  .token__inner { padding-inline: 2rem; } /* lg:px-8 */
  .token__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* lg:grid-cols-2 */
  .token__intro {
    position: sticky; /* lg:sticky */
    top: 8rem; /* lg:top-32 */
  }
}