/* =============================================================
   Theme variants — overrides for full-watercolor and full-jade looks
   Applied via root class on the page wrapper.
   ============================================================= */

/* === VARIANT A: Full Watercolor (warm paper everywhere) === */
.theme-watercolor {
  --jade-primary: #c4805a;       /* swap jade for warm coral-brown so accents match Ghibli palette */
  --jade-deep: #9a5d3e;
}
.theme-watercolor .surface-jade-dark {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(244, 212, 168, 0.5), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(232, 148, 120, 0.3), transparent 60%),
    linear-gradient(180deg, var(--watercolor-deep-paper) 0%, var(--watercolor-warm-bg) 100%) !important;
  color: var(--watercolor-ink) !important;
}
.theme-watercolor .surface-jade-dark h2,
.theme-watercolor .surface-jade-dark h3 { color: var(--watercolor-ink) !important; }
.theme-watercolor .surface-jade-dark p { color: var(--watercolor-ink-soft) !important; }
.theme-watercolor .glass-card-dark {
  background: rgba(253, 250, 240, 0.85) !important;
  border: 1px solid rgba(138, 117, 96, 0.22) !important;
  color: var(--watercolor-ink) !important;
  box-shadow: var(--shadow-soft) !important;
}
.theme-watercolor .glass-card-dark h3 { color: var(--watercolor-ink) !important; }
.theme-watercolor .glass-card-dark p { color: var(--watercolor-ink-soft) !important; }
.theme-watercolor .eyebrow { color: var(--watercolor-coral) !important; }
.theme-watercolor .btn-primary {
  background: linear-gradient(135deg, #c4805a 0%, #9a5d3e 100%) !important;
  box-shadow: 0 8px 24px -8px rgba(154, 93, 62, 0.4) !important;
}

/* === VARIANT C: Full Jade & Pearl (dark glass everywhere) === */
.theme-jade {
  background: #061410;
  color: #eaf6ee;
}
.theme-jade .surface-paper {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(94, 242, 194, 0.18), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(31, 150, 104, 0.22), transparent 60%),
    linear-gradient(180deg, #0a1f1a 0%, #061410 100%) !important;
  color: #eaf6ee !important;
}
.theme-jade .surface-paper::before { display: none !important; }
.theme-jade .page-watercolor {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(94, 242, 194, 0.18), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(31, 150, 104, 0.22), transparent 60%),
    linear-gradient(180deg, #0a1f1a 0%, #061410 100%) !important;
  color: #eaf6ee !important;
}
.theme-jade .page-watercolor::before { display: none !important; }
.theme-jade h1, .theme-jade h2, .theme-jade h3 { color: #eaf6ee !important; }
.theme-jade p { color: rgba(234, 246, 238, 0.78) !important; }
.theme-jade .eyebrow { color: #5ef2c2 !important; }
.theme-jade .watercolor-card {
  background: rgba(15, 35, 28, 0.55) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(94, 242, 194, 0.18) !important;
  color: #eaf6ee !important;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.5) !important;
}
.theme-jade .watercolor-card h3 { color: #eaf6ee !important; }
.theme-jade .watercolor-card p { color: rgba(234, 246, 238, 0.72) !important; }
.theme-jade .glass-card {
  background: rgba(15, 35, 28, 0.55) !important;
  border: 1px solid rgba(94, 242, 194, 0.18) !important;
  color: #eaf6ee !important;
}
.theme-jade .glass-card h3 { color: #eaf6ee !important; }
.theme-jade .glass-card p,
.theme-jade .glass-card span,
.theme-jade .glass-card li { color: rgba(234, 246, 238, 0.85) !important; }
.theme-jade .glass-card .eyebrow,
.theme-jade .glass-card a.btn-primary,
.theme-jade .glass-card a.btn-ghost { color: inherit; }
.theme-jade .btn-ghost {
  background: rgba(94, 242, 194, 0.1) !important;
  color: #5ef2c2 !important;
  border: 1px solid rgba(94, 242, 194, 0.3) !important;
}
.theme-jade .painted-underline::after {
  background: radial-gradient(ellipse, rgba(94, 242, 194, 0.55) 0%, transparent 70%) !important;
}

/* updated 1777575014958 */