/* ============================================================
   AURA design-system.css
   Source of truth: welcome.html
   BG: #0A0512 (deep indigo-black)
   Buttons: linear-gradient(to right, #ffe16d, #e9c400) - yellow/gold
   Fonts: Playfair Display (headlines) + Plus Jakarta Sans (body)
   Accent: #e9c400 / #ffdb3c (secondary-fixed-dim) + #ffaddf (tertiary/pink)
   ============================================================ */

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

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

/* Override body inline bg */
body[style*="background:#0A0512"] {
  background: #0A0512 !important;
}

/* CTA / primary buttons - yellow gradient */
.cta-btn,
a[href*="quiz"][class*="bg-gradient"],
[data-mysticai-cta="primary"],
button[class*="cta"],
button[class*="bg-gradient"],
a[class*="bg-gradient-to-r"][class*="secondary-fixed"] {
  background: linear-gradient(135deg, #ffe16d 0%, #e9c400 100%) !important;
  color: #221b00 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  box-shadow: 0 0 20px rgba(233,196,0,0.3) !important;
  border: none !important;
}

/* Progress bars */
[style*="background:linear-gradient(90deg,#D4AF55"] {
  background: linear-gradient(90deg, #e9c400, #ffdb3c) !important;
}

/* Accent color */
.text-secondary-fixed-dim,
[style*="color:#e9c400"],
[style*="color:#ffdb3c"] {
  color: #e9c400 !important;
}

/* Surface cards */
[class*="bg-surface-container"],
.bg-surface-container-low {
  background-color: rgba(31,31,38,0.6) !important;
}

/* Bottom sticky area */
[class*="bg-surface"][class*="backdrop"] {
  background: rgba(10,5,18,0.9) !important;
}

/* Option/quiz buttons */
.option-btn,
button[class*="option"],
[class*="quiz-option"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(233,196,0,0.2) !important;
}
.option-btn.selected {
  background: rgba(233,196,0,0.15) !important;
  border-color: rgba(233,196,0,0.6) !important;
}

/* --- Email/text input visibility fix (g2 2026-05-31) --- */
input[type=email], input[type=text], select, textarea {
  background: rgba(22, 17, 31, 0.8) !important;
  color: #E8E0F0 !important;
  border-color: rgba(205, 193, 224, 0.3) !important;
  -webkit-text-fill-color: #E8E0F0 !important;
}
input::placeholder, textarea::placeholder {
  color: #a09ab0 !important;
  -webkit-text-fill-color: #a09ab0 !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;
}