/* ============================================================
   DESIGN SYSTEM — PASTLIFE
   Auto-generated from welcome.html tokens. DO NOT EDIT MANUALLY.
   Bump ?v= on injection tag to cache-bust.
   ============================================================ */

/* === Base === */
html, body {
  background-color: #131313 !important;
  background-image: none !important;
  color: #e5e2e1 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

/* Override any inline body bg-gradient from old quiz pages */
body[style*="background"] {
  background: #131313 !important;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6,
.font-heading, .font-serif, .font-display,
[class*="headline"], [class*="display"],
[class*="font-display"], [class*="font-headline"] {
  font-family: 'Bodoni Moda', serif !important;
}

/* === Accent Color === */
.text-accent, .text-gold,
[class*="text-primary"]:not(body):not(html),
.accent-text {
  color: #D4AF37 !important;
}

/* === Buttons / CTAs === */
button:not([class*="back"]):not([class*="prev"]):not([class*="menu"]),
.btn-primary,
[class*="cta"],
a[class*="cta"] {
  background: linear-gradient(to bottom, #D4AF37, #8C6B39) !important;
  color: #131313 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  border-radius: 0.25rem !important;
}

button:not([class*="back"]):not([class*="prev"]):not([class*="menu"]):not(:disabled):hover,
.btn-primary:not(:disabled):hover {
  box-shadow: 0 0 60px rgba(212,175,55,0.15) !important;
  opacity: 0.92 !important;
}

/* Disabled buttons keep their state */
button:disabled,
.btn-primary:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* === Progress Bar === */
.progress-fill,
[class*="progress"]:not([class*="track"]):not([class*="bar-bg"]) {
  background: linear-gradient(90deg, #c9a227, #e8c547) !important;
}

/* === Option Cards (quiz choices) === */
.option:active, .option.selected,
.option-card:active, .option-card.selected,
[class*="option"]:active,
[class*="option"].selected {
  border-color: #c9a227 !important;
  box-shadow: 0 0 20px #c9a22744 !important;
  background: #c9a22714 !important;
}

/* === Surface / Cards === */
.glass-card, .parchment-card, .glass-panel,
[class*="surface-container"]:not(body):not(html),
[class*="card"], .recessed-card {
  background-color: #201f1f !important;
}

/* === Muted Text === */
.text-muted, [class*="on-surface-variant"],
[class*="text-outline"], .text-outline {
  color: #d0c5af !important;
}

/* === Particles: override off-brand particle colors === */
.particle {
  background: #D4AF37 !important;
}

/* === CTA CLICK-FIX (g4 2026-05-31) === */
button:not([class*='back']):not([class*='prev']):not([class*='menu']),
.btn-primary,
[class*='cta'],
a[class*='cta'] {
  cursor: pointer !important;
  pointer-events: auto !important;
  display: inline-flex !important;
}
button:not([class*='back']):not([class*='prev']):not([class*='menu']) > *,
.btn-primary > *,
[class*='cta'] > * {
  pointer-events: none !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;
}