/* ============================================================
   DESIGN SYSTEM — RUNY
   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: 'Manrope', 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: 'EB Garamond', serif !important;
}

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

/* === Buttons / CTAs === */
button:not([class*="back"]):not([class*="prev"]):not([class*="menu"]),
.btn-primary,
[class*="cta"],
a[class*="cta"] {
  background: linear-gradient(135deg, #f2ca50 0%, #d4af37 50%, #f2ca50 100%) !important;
  color: #3c2f00 !important;
  font-family: 'Manrope', sans-serif !important;
  border-radius: 9999px !important;
}

button:not([class*="back"]):not([class*="prev"]):not([class*="menu"]):not(:disabled):hover,
.btn-primary:not(:disabled):hover {
  box-shadow: 0 0 25px rgba(242,202,80,0.3) !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, #f2ca50, #d4af37) !important;
}

/* === Option Cards (quiz choices) === */
.option:active, .option.selected,
.option-card:active, .option-card.selected,
[class*="option"]:active,
[class*="option"].selected {
  border-color: #f2ca50 !important;
  box-shadow: 0 0 20px #f2ca5044 !important;
  background: #f2ca5014 !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: #f2ca50 !important;
}

/* === Material Symbols Outlined — font-family fix (g2) === */
/* html,body !important override would break icon ligatures — restore here */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");
.material-symbols-outlined,
span.material-symbols-outlined {
  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";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}