/* ============================================================
   gneratr — Violet theme (black / white / dark violet)
   Layered on top of styles.css. Used only on the gneratr page.
   ============================================================ */
:root {
  /* Accent slots (originally teal) become violet */
  --teal: #a855f7;          /* vivid violet — accent text, icons, dots */
  --teal-dark: #c084fc;     /* hover */
  --teal-soft: rgba(168, 85, 247, 0.14);
  --teal-glow: rgba(139, 92, 246, 0.34);

  /* Near-black surfaces with a faint violet cast */
  --bg: #0a0710;
  --bg-alt: #110b1c;
  --surface: #181024;
  --surface-2: #221634;

  --text: #f4f1fb;
  --muted: #a89db8;
  --border: rgba(180, 150, 230, 0.14);
}

/* Primary button: violet fill, white label */
.btn-primary {
  background: linear-gradient(180deg, #9b6bf5, #7c3aed);
  color: #ffffff;
  box-shadow: 0 8px 26px var(--teal-glow);
}
.btn-primary:hover { background: linear-gradient(180deg, #a880f7, #8b46ef); }

/* gradient text → violet */
.grad {
  background: linear-gradient(120deg, #d6b8ff, #a855f7 60%, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero grid + glow read as violet light */
.hero-bg {
  background:
    radial-gradient(60% 50% at 75% 10%, rgba(139, 92, 246, 0.28), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(124, 58, 237, 0.14), transparent 60%),
    linear-gradient(180deg, transparent, var(--bg));
}

/* Accent details */
.card:hover { border-color: rgba(168, 85, 247, 0.45); }
.timeline li::before { box-shadow: 0 0 0 4px var(--bg-alt), 0 0 16px var(--teal-glow); }
.compare-card.highlight { border-color: var(--teal); background: var(--surface-2); }