/* SHADOW DESIGN SYSTEM — extracted from index.html (welcome) */
/* Welcome tokens: bg #0B0A0C (dark charcoal), 
   btn linear-gradient(135deg,#8B2A3A,#a48b8c) — crimson to smoky silver,
   fonts Playfair Display + Inter/Plus Jakarta Sans, 
   accent #ffb2b8 (primary rose), primary-container #8B2A3A (deep crimson) */

/* --- Reset body/html to shadow dark charcoal --- */
html, body {
  background-color: #0B0A0C !important;
  color: #e6e1e4 !important;
}

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

/* --- Button / CTA override to crimson gradient --- */
button[class*='btn'], button[onclick], .bg-cta-gradient, .btn-glow,
button[class*='cta'], #next-btn, #unlock-btn, #continue-btn,
button[data-funnel-next], a[class*='btn'] {
  background: linear-gradient(135deg, #8B2A3A 0%, #a48b8c 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px rgba(139,42,58,0.4) !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, #8B2A3A 0%, #a48b8c 100%) !important;
  opacity: 0.4 !important;
}

/* --- shadow-opt selected state --- */
.shadow-opt.selected, [data-option][data-selected='true'], .selected {
  border-color: #CF6B8A !important;
  background: rgba(139,42,58,0.15) !important;
}

/* --- Surface containers dark charcoal --- */
[class*='surface-container'], .glass-card, .glass-panel,
.reading-card, .shadow-opt {
  background: #1A1118 !important;
  border-color: #2C1A27 !important;
}

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

/* --- Progress bars crimson/lavender --- */
[data-funnel-progress], [class*='progress-fill'], [id*='score-bar'], .progress-fill {
  background: linear-gradient(90deg, #CF6B8A, #8B7FD4) !important;
}

/* --- Input fields --- */
input[type=email], input[type=text], select, textarea {
  background: #1A1118 !important;
  color: #e6e1e4 !important;
  border-color: #2C1A27 !important;
}
input::placeholder, textarea::placeholder {
  color: #7A5F6A !important;
}

/* --- Sticky bottom overlay --- */
._sticky_cta, [class*='fixed bottom'] {
  background: linear-gradient(to top, #0B0A0C 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;
}