/* ============================================================
   ENERGY-VAMPIRE design-system.css
   Source of truth: welcome.html
   BG: #0A0A12 | Buttons: linear-gradient(135deg,#8B0000,#C0392B,#E05A6B)
   Fonts: Playfair Display (headlines) + Plus Jakarta Sans (body)
   Accent: #E05A6B (crimson-pink) + #9B59B6 (violet)
   ============================================================ */

html, body {
  background-color: #0A0A12 !important;
  background: #0A0A12 !important;
  color: #e8d5f7 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.font-headline-lg, .font-headline-md,
[class*="headline"], [style*="Playfair"] {
  font-family: 'Playfair Display', serif !important;
}

/* Override any conflicting backgrounds */
body[style*="background"] {
  background-color: #0A0A12 !important;
  background: #0A0A12 !important;
}

/* CTA / primary buttons */
.cta-btn,
.drain-btn,
.unlock-btn,
button.cta-btn,
button[class*="cta"],
button[class*="primary"],
a[class*="cta"],
[data-mysticai-cta="primary"] {
  background: linear-gradient(135deg, #8B0000 0%, #C0392B 50%, #E05A6B 100%) !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  box-shadow: 0 4px 24px rgba(192,57,43,0.4), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  border: none !important;
}

/* Progress bar fill */
.prog-fill,
[class*="prog-fill"],
[style*="background:linear-gradient(to right,#C0392B"] {
  background: linear-gradient(to right, #C0392B, #9B59B6) !important;
}

/* Accent color for text/icons */
.text-primary,
[style*="color:#E05A6B"],
[style*="color: #E05A6B"] {
  color: #E05A6B !important;
}

/* Glass cards keep their surface */
.glass-card {
  background: rgba(26,21,37,0.7) !important;
  border-color: rgba(192,57,43,0.2) !important;
}

/* Gradient text (headline accents) */
.gradient-text {
  background: linear-gradient(135deg, #E05A6B 0%, #9B59B6 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* === Material Symbols Outlined — font-family fix (g2) === */
/* html,body !important override would break icon ligatures — restore here */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");
.material-symbols-outlined,
span.material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}