/* NUMEROLOG DESIGN SYSTEM — extracted from index.html (welcome) */
/* Welcome tokens: bg radial-gradient(circle at top, #122429 0%, #08161A 60%, #031014 100%), 
   btn linear-gradient(135deg,#F1D28C,#D4AF55), fonts Playfair Display + Inter, 
   accent #f2ca6d (primary gold), secondary #8dd5b2 (emerald) */

/* --- Reset body/html to numerolog teal-dark palette --- */
html, body {
  background: radial-gradient(circle at top, #122429 0%, #08161A 60%, #031014 100%) !important;
  background-attachment: fixed !important;
  color: #d6e5eb !important;
}

/* --- Typography reset to Playfair Display + Inter --- */
h1, h2, h3, h4, h5, h6,
[class*='font-headline'], [class*='font-display'], [class*='font-numeric'],
[class*='font-brand'] {
  font-family: 'Playfair Display', serif !important;
}
body, p, span, div, button, input, select, label,
[class*='font-body'], [class*='font-label'] {
  font-family: 'Inter', 'Hanken Grotesk', sans-serif !important;
}

/* --- Button / CTA override to gold gradient --- */
button[class*='btn'], button[onclick], .gold-gradient-btn, .btn-gold,
button[class*='cta'], button[class*='gold'],
button[data-funnel-next], #next-btn, #unlock-btn, #continue-btn,
a[class*='btn'], .pill-gradient {
  background: linear-gradient(135deg, #F1D28C 0%, #D4AF55 100%) !important;
  background-size: unset !important;
  color: #031014 !important;
  box-shadow: 0 4px 20px rgba(212,175,85,0.3) !important;
  border: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
button[data-funnel-next]:disabled, button[data-funnel-next].f-btn-disabled {
  background: linear-gradient(135deg, #F1D28C 0%, #D4AF55 100%) !important;
  opacity: 0.4 !important;
}

/* --- Surface containers keep teal dark --- */
[class*='surface-container'], .glass-card, .glass-panel, .aura-shadow {
  background: rgba(26, 61, 70, 0.6) !important;
  border-color: rgba(212,175,85,0.2) !important;
}

/* --- Accent gold for primary text --- */
[class*='text-primary'], .text-primary {
  color: #f2ca6d !important;
}

/* --- Emerald secondary --- */
[class*='text-secondary'], .text-secondary {
  color: #8dd5b2 !important;
}

/* --- Progress bars gold --- */
[data-funnel-progress], [class*='progress-fill'], [id*='score-bar'] {
  background: linear-gradient(90deg, #F1D28C, #D4AF55) !important;
}

/* --- Selected option highlight --- */
[data-option][data-selected='true'], .option-card.selected, .selected {
  border-color: #D4AF55 !important;
  background: rgba(200,169,110,0.1) !important;
}

/* --- Input fields teal dark --- */
input[type=email], input[type=text], select, textarea {
  background: #101e22 !important;
  color: #d6e5eb !important;
  border-color: rgba(212,175,85,0.3) !important;
}
input::placeholder, textarea::placeholder {
  color: #a8988a !important;
}

/* --- Sticky bottom CTA gradient --- */
._sticky_cta {
  background: linear-gradient(to top, #031014 60%, transparent) !important;
}

/* LIGATURE FIX: prevent body/span font-family override from breaking Material Symbols icons */
span.material-symbols-outlined,
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}