/* ============================================================
   SOUL design-system.css
   Source of truth: welcome.html (SOUL-1111)
   BG: #121314 (near-black)
   Buttons: linear-gradient(to right, #f2ca50, #d4af37) - gold celestial
   Fonts: Playfair Display (headlines) + Hanken Grotesk (body)
   Accent: #f2ca50 (primary/gold) + #d1bcff (secondary/lavender)
   ============================================================ */

html, body {
  background-color: #121314 !important;
  background: #121314 !important;
  color: #e3e2e3 !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
}

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

/* CTA / primary buttons - gold */
.cta-btn,
button[class*="cta"],
[data-mysticai-cta="primary"],
button[class*="bg-gradient"],
button[class*="celestial-glow"],
button[class*="btn-bloom"],
.btn-bloom {
  background: linear-gradient(135deg, #f2ca50 0%, #d4af37 100%) !important;
  color: #1c1400 !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  box-shadow: 0 0 30px 5px rgba(242,202,80,0.25) !important;
  border: none !important;
}

/* Progress bars */
[style*="background:linear-gradient(90deg, #d4af37"],
[style*="background: linear-gradient(90deg, #d4af37"] {
  background: linear-gradient(90deg, #d4af37 0%, #f2ca50 50%, #d4af37 100%) !important;
}

/* Primary gold accent */
.text-primary,
[style*="color:#f2ca50"],
[style*="color: #f2ca50"] {
  color: #f2ca50 !important;
}

/* Glass blur cards */
.glass-blur,
[class*="backdrop-blur"][class*="bg-\["] {
  background: rgba(26,28,28,0.4) !important;
  backdrop-filter: blur(20px) !important;
}

/* Bottom gradient footer */
[class*="bg-gradient-to-t"][class*="from-background"] {
  background: linear-gradient(to top, #121314, rgba(18,19,20,0.8), transparent) !important;
}

/* Surface containers */
[class*="bg-surface-container"] {
  background-color: rgba(31,32,33,0.6) !important;
}

/* Option cards */
.option-btn,
button[class*="option"] {
  background: rgba(26,28,28,0.4) !important;
  border: 1px solid rgba(212,175,55,0.15) !important;
}
.option-btn.selected,
button[class*="option"].selected {
  background: rgba(212,175,55,0.1) !important;
  border-color: rgba(212,175,55,0.5) !important;
}

/* ===== EMAIL INPUT VISIBILITY FIX (g3) ===== */
input[type=email],
input[type=text],
input[name*=email] {
  color: #e3e2e3 !important;
  -webkit-text-fill-color: #e3e2e3 !important;
  caret-color: #f2ca50 !important;
}
input[type=email]::placeholder,
input[type=text]::placeholder,
input[name*=email]::placeholder {
  color: rgba(227,226,227,0.45) !important;
  -webkit-text-fill-color: rgba(227,226,227,0.45) !important;
  opacity: 1 !important;
}

/* === g3 ligature fix 2026-05-31 === */
/* Restore Material Symbols font-family overridden by design-system body/span rules */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp,
span.material-symbols-outlined,
span.material-symbols-rounded,
span.material-symbols-sharp {
  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";
  -webkit-font-smoothing: antialiased;
}