/* ===== SAGE (default) ===== */
html[data-theme="sage"] {
/* Greens */
  --e-forest: #2F6B55;        /* primary accent (replaces terracotta as lead) */
  --e-forest-deep: #255645;
  --e-leaf: #4E9E7A;          /* brighter highlight green */
  --e-sage: #DCE8DF;          /* mid tint for former-dark sections */
  --e-sage-deep: #CBDED1;     /* slightly deeper sage */
  --e-mint: #EDF4EE;          /* soft light panel */
  --e-ivory: #F6F6F1;         /* page base */
  --e-terracotta: #CA664F;    /* kept as secondary pop only */

  /* Remap the D2/B tokens so everything inherits the new palette */
  --ob-navy: #2F6B55;         /* "navy" now reads as forest green on tinted panels */
  --ob-navy-deep: #255645;
  --ob-navy-ink: #CBDED1;     /* former darkest -> deeper sage tint */
  --ob-accent: #2F6B55;       /* lead accent = forest green */
  --ob-accent-soft: #E3EFE7;
  --ob-teal: #3E7F86;
  --ob-cream: #F6F6F1;
  --ob-line: #D7E0D7;
  --ob-line-dark: rgba(47, 107, 85, .18);   /* lines inside tinted sections now green-tinted */

  --bg-base: #F6F6F1;
  --bg-subtle: #EDF4EE;
  --fg-base: #203A30;         /* deep green-ink text */
  --fg-muted: #566b60;
  --fg-subtle: #7d8d82;
  --border-base: #D7E0D7;
  --border-soft: #E6ECE6;
  --border-strong: #Bccabd;
  --brand-accent: #2F6B55;
  --brand-primary: #2F6B55;
}
html[data-theme="sage"] body { background: var(--e-ivory); }
/* FIX: primary former-dark -> light sage with dark text (was dropped by scoping script) */
html[data-theme="sage"] .ob-navy-bg,
html[data-theme="sage"] .ob-ink-bg,
html[data-theme="sage"] .d2-impact,
html[data-theme="sage"] .d2-h-sec { background: var(--e-sage) !important; color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-navy-bg .ob-micro, html[data-theme="sage"] .ob-ink-bg .ob-micro, html[data-theme="sage"] .d2-impact .ob-micro, html[data-theme="sage"] .d2-h-sec .ob-micro,
html[data-theme="sage"] .ob-navy-bg .ob-support, html[data-theme="sage"] .ob-ink-bg .ob-support, html[data-theme="sage"] .d2-impact .ob-support, html[data-theme="sage"] .d2-h-sec .ob-support,
html[data-theme="sage"] .ob-navy-bg .ob-chapter-name, html[data-theme="sage"] .ob-ink-bg .ob-chapter-name { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-ink-bg, html[data-theme="sage"] .d2-impact { background: var(--e-sage-deep) !important; }
html[data-theme="sage"] .ob-navy-bg .ob-h2, html[data-theme="sage"] .ob-ink-bg .ob-h2, html[data-theme="sage"] .d2-impact .ob-h2, html[data-theme="sage"] .d2-h-sec .ob-h2 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-h2 .hl, html[data-theme="sage"] .hl { color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-hero-bg {
  background:
    radial-gradient(620px 420px at var(--mx,70%) var(--my,20%), rgba(47,107,85,.22), transparent 60%),
    radial-gradient(540px 420px at 20% 80%, rgba(62,127,134,.16), transparent 60%) !important;
}
/* FIX: sage hero must be LIGHT (dropped by scoper -> was dark hero + dark text) */
html[data-theme="sage"] .ob-hero,
html[data-theme="sage"] .d2-hero {
  background:
    radial-gradient(1000px 520px at 80% 15%, rgba(78,158,122,.28), transparent 60%),
    linear-gradient(165deg, #EDF4EE 0%, #DCE8DF 55%, #CBDED1 100%) !important;
  color: var(--fg-base) !important;
}
html[data-theme="sage"] .ob-hero-stats {
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(47,107,85,.2) !important;
}
html[data-theme="sage"] .ob-hero h1, html[data-theme="sage"] .d2-hero h1 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-hero h1 .hl { color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-hero .ob-lead, html[data-theme="sage"] .d2-hero .ob-lead { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-hero .ob-micro { color: var(--fg-subtle) !important; }
html[data-theme="sage"] .ob-hero-stats div + div { border-left: 1px solid rgba(47,107,85,.18) !important; }
html[data-theme="sage"] .ob-hero-stats strong { color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-hero-stats span { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-hero-live { border-top-color: rgba(47,107,85,.18) !important; color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-hero-live b { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-btn-solid:hover { background: var(--e-forest-deep) !important; }
html[data-theme="sage"] .ob-btn-ghost { color: var(--fg-base) !important; border-color: rgba(47,107,85,.35) !important; }
html[data-theme="sage"] .ob-btn-ghost:hover { border-color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-btn-dark { background: var(--e-forest) !important; border-color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-btn-outline { color: var(--e-forest) !important; border-color: var(--border-strong) !important; }
html[data-theme="sage"] .header-actions .ob-btn-dark:hover { background: #b4573f !important; }
html[data-theme="sage"] .ob-rail button.is-active i { background: var(--e-forest); }
html[data-theme="sage"] .ob-rail button.is-active span { color: var(--e-forest); }
html[data-theme="sage"] .ob-rail.on-dark i { background: rgba(47,107,85,.4); }
html[data-theme="sage"] .od-spine { background: rgba(47,107,85,.12) !important; }
html[data-theme="sage"] .od-spine-fill { background: linear-gradient(var(--e-forest), var(--e-leaf)) !important; }
html[data-theme="sage"] .od-spine.on-dark { background: rgba(47,107,85,.18) !important; }
html[data-theme="sage"] .ob-hair-cell em { color: var(--fg-subtle) !important; }
html[data-theme="sage"] .ob-hair-ico { color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-filled-bar { background: var(--e-forest) !important; }
html[data-theme="sage"] .ob-pill { background: #fff !important; border-color: var(--border-base) !important; color: var(--fg-muted) !important; }
html[data-theme="sage"] .od-gauge .ob-micro { color: var(--fg-muted) !important; }
html[data-theme="sage"] .od-gauge-track { background: rgba(47,107,85,.08) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .od-gauge-fill.most { background: #A9B8AC !important; }
html[data-theme="sage"] .od-gauge-fill.aram { background: linear-gradient(90deg, var(--e-forest), var(--e-leaf)) !important; }
html[data-theme="sage"] .od-gauge-marks span { color: var(--fg-subtle) !important; }
html[data-theme="sage"] .od-gauge-marks span.aram { color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-cprog-fg { stroke: var(--e-forest) !important; filter: drop-shadow(0 0 6px rgba(47,107,85,.3)) !important; }
html[data-theme="sage"] .d2-cprog.is-complete .d2-cprog-fg { stroke: var(--e-leaf) !important; filter: drop-shadow(0 0 10px rgba(78,158,122,.5)) !important; }
html[data-theme="sage"] .d2-cprog-center b { color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-stepper-line i { background: var(--e-forest) !important; }
html[data-theme="sage"] .ob-step-chip { background: var(--e-forest) !important; }
html[data-theme="sage"] .ob-steps .ob-micro { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-flow-card { background: #fff !important; border: 1px solid var(--border-base) !important; }
html[data-theme="sage"] .ob-flow-num { background: var(--e-forest) !important; }
html[data-theme="sage"] .ob-flow-body h3 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-flow-body p { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-flow-artifact { color: var(--e-forest) !important; border-top-color: var(--border-soft) !important; }
html[data-theme="sage"] .d2-at-left h2 { color: var(--fg-base) !important; }
html[data-theme="sage"] .d2-at-left h2 .hl { color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-at-paper { background: #fff !important; border-color: var(--border-base) !important; box-shadow: 0 24px 56px rgba(47,107,85,.12) !important; }
html[data-theme="sage"] .d2-at-note { background: var(--e-forest) !important; }
html[data-theme="sage"] .d2-at-note::before { border-right-color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-ring-fg { stroke: var(--e-forest) !important; }
html[data-theme="sage"] .d2-replay:hover { border-color: var(--e-forest) !important; color: var(--e-forest) !important; background: var(--e-mint) !important; }
html[data-theme="sage"] .ob-ai-head { border-bottom-color: var(--border-soft) !important; }
html[data-theme="sage"] .ob-ai-head strong { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-ai-head small, html[data-theme="sage"] .ob-ai-stage p, html[data-theme="sage"] .d2-dash-body > p { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-ai-stage h4, html[data-theme="sage"] .d2-dash-body h4 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-ai-bar, html[data-theme="sage"] .d2-dash-bar, html[data-theme="sage"] .d2-ds-bar { color: var(--fg-subtle) !important; }
html[data-theme="sage"] .ob-ai-bar div, html[data-theme="sage"] .d2-dash-bar .tr, html[data-theme="sage"] .d2-ds-bar .tr { background: var(--e-sage) !important; }
html[data-theme="sage"] .ob-ai-bar div i, html[data-theme="sage"] .d2-dash-bar .tr i, html[data-theme="sage"] .d2-ds-bar .tr i { background: var(--e-forest) !important; }
html[data-theme="sage"] .ob-ai-task, html[data-theme="sage"] .d2-dash-task { border-color: rgba(47,107,85,.4) !important; color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-ai-task b, html[data-theme="sage"] .d2-dash-task b { color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-ai-steps button, html[data-theme="sage"] .d2-dash-steps i { background: rgba(47,107,85,.14) !important; }
html[data-theme="sage"] .ob-ai-steps button.is-on, html[data-theme="sage"] .d2-dash-steps i.on { background: var(--e-forest) !important; }
html[data-theme="sage"] .ob-ai-dot, html[data-theme="sage"] .d2-dash-top .dot { background: var(--e-forest) !important; }
html[data-theme="sage"] .d2-dash::before, html[data-theme="sage"] .d2-aigraph::before, html[data-theme="sage"] .d2-ai-card::before {
  background: linear-gradient(115deg, transparent 42%, rgba(47,107,85,.07) 50%, transparent 58%) !important;
}
html[data-theme="sage"] .d2-dash-tab { color: var(--fg-subtle) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .d2-dash-tab.on { color: var(--e-forest) !important; border-color: var(--e-forest) !important; background: var(--e-mint) !important; }
html[data-theme="sage"] .d2-dash-kicker, html[data-theme="sage"] .d2-ai-card .ob-micro, html[data-theme="sage"] .d2-ai-card-head .st { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-dash-top strong, html[data-theme="sage"] .d2-ai-card h5 { color: var(--fg-base) !important; }
html[data-theme="sage"] .d2-ds-chip { color: var(--fg-muted) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .d2-ds-chip.weak { color: var(--e-terracotta) !important; border-color: var(--e-terracotta) !important; background: #FBEEE9 !important; }
html[data-theme="sage"] .d2-ds-chip.strong { color: var(--e-forest) !important; border-color: rgba(47,107,85,.4) !important; }
html[data-theme="sage"] .d2-ds-item { color: var(--fg-muted) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .d2-ds-item .chk { border-color: var(--e-forest) !important; color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-ds-item.done .chk { background: var(--e-forest) !important; }
html[data-theme="sage"] .d2-ag-axis { stroke: rgba(47,107,85,.25) !important; }
html[data-theme="sage"] .d2-ag-line { stroke: var(--e-forest) !important; }
html[data-theme="sage"] .d2-ag-area { fill: var(--e-forest) !important; }
html[data-theme="sage"] .d2-ag-live { stroke: var(--e-forest) !important; fill: #fff !important; }
html[data-theme="sage"] .d2-ag-label { fill: var(--e-forest) !important; }
html[data-theme="sage"] .d2-aigraph-foot, html[data-theme="sage"] .d2-aigraph-status { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-aigraph-foot b { color: var(--fg-base) !important; }
html[data-theme="sage"] .d2-rankbar.dim .col { background: rgba(47,107,85,.18) !important; }
html[data-theme="sage"] .d2-rankbar .col::after { color: var(--fg-base) !important; }
html[data-theme="sage"] .d2-rankbar span { color: var(--fg-subtle) !important; }
html[data-theme="sage"] .d2-pie .pie-track { stroke: var(--e-sage) !important; }
html[data-theme="sage"] .d2-pie-center b { color: var(--fg-base) !important; }
html[data-theme="sage"] .d2-pie-legend div { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-pie-legend b { color: var(--fg-base) !important; }
html[data-theme="sage"] .d2-impact-stats strong { color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-impact-stats span { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-impact-card { background: rgba(255,255,255,.6) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .d2-impact-card > .ob-micro, html[data-theme="sage"] .d2-impact-cap, html[data-theme="sage"] .d2-heat-legend, html[data-theme="sage"] .d2-heat-row-labels span { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-ba2-before .bar { background: #A9B8AC !important; }
html[data-theme="sage"] .d2-ba2-after .bar { background: linear-gradient(var(--e-forest), var(--e-forest-deep)) !important; }
html[data-theme="sage"] .d2-ba2-after .cap, html[data-theme="sage"] .d2-ba2-lift b { color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-ba2-before .cap, html[data-theme="sage"] .d2-ba2-lift span { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-ba2-col .lbl { color: var(--fg-subtle) !important; }
/* NOTE: no !important — the JS paints each cell's ramp colour via inline style,
   and !important here would block that, leaving the heatmap empty. */
html[data-theme="sage"] .d2-heatcell { background: rgba(47,107,85,.06); }
/* Green coverage ramp for sage: weak (pale) -> covered (forest/leaf) */
html[data-theme="sage"] {
  --heat-0: rgba(47,107,85,.18);
  --heat-1: rgba(47,107,85,.42);
  --heat-2: rgba(47,107,85,.68);
  --heat-3: #4E9E7A;
}
html[data-theme="sage"] .od-ticker-label { background: var(--e-forest) !important; color: #fff !important; }
html[data-theme="sage"] .od-ticker-track span { color: var(--fg-muted) !important; }
html[data-theme="sage"] .od-ticker-track b { color: var(--fg-base) !important; }
html[data-theme="sage"] .d2-liveband { background: var(--e-sage-deep) !important; }
html[data-theme="sage"] .d2-liveband-inner { background: rgba(47,107,85,.14) !important; }
html[data-theme="sage"] .d2-live-cell { background: var(--e-sage-deep) !important; }
html[data-theme="sage"] .d2-live-cell strong { color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-live-cell strong .u { color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-live-cell span { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-live-cell::after { background: linear-gradient(90deg, transparent, var(--e-forest), transparent) !important; }
html[data-theme="sage"] .ob-sbar div i { background: var(--e-forest-deep) !important; }
html[data-theme="sage"] .ob-sbar:nth-child(1) div i { background: var(--e-forest) !important; }
html[data-theme="sage"] .ob-face { background: #fff !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .ob-face-front strong { color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-face-back { background: var(--e-forest) !important; border-color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-chart .climb { stroke: var(--e-forest) !important; }
html[data-theme="sage"] .d2-chart .dot { fill: var(--e-forest) !important; }
html[data-theme="sage"] .ob-fork-left { background: var(--e-mint) !important; }
html[data-theme="sage"] .ob-fork-right { background: var(--e-sage-deep) !important; color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-fork-right p { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-fork-right li { color: var(--fg-muted) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .ob-fork h3 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-door { background: rgba(255,255,255,.5) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .ob-door:hover { background: var(--e-mint) !important; }
html[data-theme="sage"] .ob-door h3 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-door li { color: var(--fg-muted) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .ob-trust-note { border-color: var(--border-base) !important; border-left-color: var(--e-forest) !important; color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-trust-note strong { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-mod:hover { background: #fff !important; }
html[data-theme="sage"] .ob-mod-num { color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-mod-arrow { color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-cursor.is-hover { background: rgba(47,107,85,.12) !important; }
html[data-theme="sage"] .d2-cursor.is-label::after { color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-cursor-dot { background: var(--e-forest) !important; }
html[data-theme="sage"] .d2-grain { opacity: .03 !important; mix-blend-mode: multiply !important; }
html[data-theme="sage"] .ob-white-bg { background: var(--e-ivory) !important; }
html[data-theme="sage"] .ob-section-alt { background: var(--e-mint) !important; }


/* ============================================================
   BURGUNDY / INDIGO / SLATE for D2 — token remaps + shared
   structural overrides for D2's extra modules.
   ============================================================ */

html[data-theme="burgundy"] {
  --ob-navy:#7E2A3B; --ob-navy-deep:#671F2E; --ob-navy-ink:#E6D4D4;
  --ob-accent:#7E2A3B; --ob-accent-soft:#F0E2E1; --ob-teal:#8a6a2f;
  --ob-cream:#F8F4EE; --ob-line:#E2D7CF; --ob-line-dark:rgba(126,42,59,.18);
  --fg-base:#35252A; --fg-muted:#6c565c; --fg-subtle:#957d82;
  --border-base:#E2D7CF; --border-soft:#EDE4DC; --border-strong:#ccbdb4;
  --brand-accent:#7E2A3B; --brand-primary:#7E2A3B;
  --t-lead:#7E2A3B; --t-lead-deep:#671F2E; --t-mid:#EFE3E2; --t-mid-deep:#E6D4D4;
  --t-light:#F3EDE6; --t-base:#F8F4EE; --t-pop:#B08431; --t-grey:#C3B2AE; --t-dark:0;
}
html[data-theme="indigo"] {
  --ob-navy:#3B3A7A; --ob-navy-deep:#2A2A5E; --ob-navy-ink:#1C1B3A;
  --ob-accent:#FF6B5E; --ob-accent-soft:#EFE9F6; --ob-teal:#5B8DEF;
  --ob-cream:#F4F2FB; --ob-line:#E2DEF0; --ob-line-dark:rgba(255,255,255,.16);
  --fg-base:#211F3D; --fg-muted:#5f5c82; --fg-subtle:#8a86a8;
  --border-base:#E2DEF0; --border-soft:#ECE9F6; --border-strong:#c4bedd;
  --brand-accent:#FF6B5E; --brand-primary:#3B3A7A;
  --t-lead:#FF6B5E; --t-lead-deep:#E8544A; --t-mid:#3B3A7A; --t-mid-deep:#1C1B3A;
  --t-light:#F4F2FB; --t-base:#F4F2FB; --t-pop:#6C63C7; --t-grey:#2A2A5E; --t-dark:1;
}
html[data-theme="slate"] {
  --ob-navy:#1F7A8C; --ob-navy-deep:#15606E; --ob-navy-ink:#D5DDE2;
  --ob-accent:#1F7A8C; --ob-accent-soft:#DEEAEC; --ob-teal:#1F7A8C;
  --ob-cream:#F7F9FA; --ob-line:#D4DCE1; --ob-line-dark:rgba(31,122,140,.18);
  --fg-base:#1E2A30; --fg-muted:#556169; --fg-subtle:#808d94;
  --border-base:#D4DCE1; --border-soft:#E4EAED; --border-strong:#b4c0c7;
  --brand-accent:#1F7A8C; --brand-primary:#1F7A8C;
  --t-lead:#1F7A8C; --t-lead-deep:#15606E; --t-mid:#E3E8EC; --t-mid-deep:#D5DDE2;
  --t-light:#EEF2F4; --t-base:#F7F9FA; --t-pop:#D98E2B; --t-grey:#AEB9BF; --t-dark:0;
}
/* also expose t-tokens for sage so shared rules work there too */
html[data-theme="sage"] {
  --t-lead:#2F6B55; --t-lead-deep:#255645; --t-mid:#DCE8DF; --t-mid-deep:#CBDED1;
  --t-light:#EDF4EE; --t-base:#F6F6F1; --t-pop:#CA664F; --t-grey:#A9B8AC; --t-dark:0;
}

/* ---- LIGHT themes (burgundy, slate): former-dark sections -> tinted + dark text ---- */
html[data-theme="burgundy"] body, html[data-theme="slate"] body { background: var(--t-base); }

html[data-theme="burgundy"] .ob-navy-bg, html[data-theme="burgundy"] .ob-ink-bg, html[data-theme="burgundy"] .d2-impact, html[data-theme="burgundy"] .d2-h-sec,
html[data-theme="slate"] .ob-navy-bg, html[data-theme="slate"] .ob-ink-bg, html[data-theme="slate"] .d2-impact, html[data-theme="slate"] .d2-h-sec {
  background: var(--t-mid) !important; color: var(--fg-base) !important;
}
html[data-theme="burgundy"] .ob-ink-bg, html[data-theme="burgundy"] .d2-impact,
html[data-theme="slate"] .ob-ink-bg, html[data-theme="slate"] .d2-impact { background: var(--t-mid-deep) !important; }

/* light-theme text flips inside former-dark sections */
html[data-theme="burgundy"] .ob-navy-bg .ob-micro, html[data-theme="burgundy"] .ob-ink-bg .ob-micro, html[data-theme="burgundy"] .d2-impact .ob-micro, html[data-theme="burgundy"] .d2-h-sec .ob-micro,
html[data-theme="burgundy"] .ob-navy-bg .ob-support, html[data-theme="burgundy"] .ob-ink-bg .ob-support, html[data-theme="burgundy"] .d2-impact .ob-support, html[data-theme="burgundy"] .d2-h-sec .ob-support,
html[data-theme="burgundy"] .ob-navy-bg .ob-chapter-name, html[data-theme="burgundy"] .ob-ink-bg .ob-chapter-name,
html[data-theme="slate"] .ob-navy-bg .ob-micro, html[data-theme="slate"] .ob-ink-bg .ob-micro, html[data-theme="slate"] .d2-impact .ob-micro, html[data-theme="slate"] .d2-h-sec .ob-micro,
html[data-theme="slate"] .ob-navy-bg .ob-support, html[data-theme="slate"] .ob-ink-bg .ob-support, html[data-theme="slate"] .d2-impact .ob-support, html[data-theme="slate"] .d2-h-sec .ob-support,
html[data-theme="slate"] .ob-navy-bg .ob-chapter-name, html[data-theme="slate"] .ob-ink-bg .ob-chapter-name { color: var(--fg-muted) !important; }

html[data-theme="burgundy"] .ob-navy-bg .ob-h2, html[data-theme="burgundy"] .ob-ink-bg .ob-h2, html[data-theme="burgundy"] .d2-impact .ob-h2, html[data-theme="burgundy"] .d2-h-sec .ob-h2,
html[data-theme="slate"] .ob-navy-bg .ob-h2, html[data-theme="slate"] .ob-ink-bg .ob-h2, html[data-theme="slate"] .d2-impact .ob-h2, html[data-theme="slate"] .d2-h-sec .ob-h2 { color: var(--fg-base) !important; }

/* hero (light themes) */
html[data-theme="burgundy"] .ob-hero, html[data-theme="burgundy"] .d2-hero,
html[data-theme="slate"] .ob-hero, html[data-theme="slate"] .d2-hero {
  background:
    radial-gradient(1000px 520px at 80% 15%, color-mix(in srgb, var(--t-pop) 24%, transparent), transparent 60%),
    linear-gradient(165deg, var(--t-light) 0%, var(--t-mid) 55%, var(--t-mid-deep) 100%) !important;
  color: var(--fg-base) !important;
}
html[data-theme="burgundy"] .ob-hero h1, html[data-theme="slate"] .ob-hero h1,
html[data-theme="burgundy"] .d2-hero h1, html[data-theme="slate"] .d2-hero h1 { color: var(--fg-base) !important; }
html[data-theme="burgundy"] .ob-lead, html[data-theme="slate"] .ob-lead { color: var(--fg-muted) !important; }
html[data-theme="burgundy"] .ob-hero-stats, html[data-theme="slate"] .ob-hero-stats { background: rgba(255,255,255,.55) !important; border:1px solid color-mix(in srgb,var(--t-lead) 20%,transparent) !important; }
html[data-theme="burgundy"] .ob-hero-stats span, html[data-theme="slate"] .ob-hero-stats span { color: var(--fg-muted) !important; }

/* light-theme: former-dark cards/panels -> white with dark text (burgundy, slate) */
html[data-theme="burgundy"] .ob-ai-panel, html[data-theme="slate"] .ob-ai-panel,
html[data-theme="burgundy"] .d2-dash, html[data-theme="slate"] .d2-dash,
html[data-theme="burgundy"] .d2-aigraph, html[data-theme="slate"] .d2-aigraph,
html[data-theme="burgundy"] .d2-ai-card, html[data-theme="slate"] .d2-ai-card,
html[data-theme="burgundy"] .ob-flow-card, html[data-theme="slate"] .ob-flow-card { background:#fff !important; border:1px solid var(--border-base) !important; color: var(--fg-base) !important; }

html[data-theme="burgundy"] .ob-ai-head strong, html[data-theme="slate"] .ob-ai-head strong,
html[data-theme="burgundy"] .ob-ai-stage h4, html[data-theme="slate"] .ob-ai-stage h4,
html[data-theme="burgundy"] .d2-dash-body h4, html[data-theme="slate"] .d2-dash-body h4,
html[data-theme="burgundy"] .d2-dash-top strong, html[data-theme="slate"] .d2-dash-top strong,
html[data-theme="burgundy"] .d2-ai-card h5, html[data-theme="slate"] .d2-ai-card h5,
html[data-theme="burgundy"] .ob-flow-body h3, html[data-theme="slate"] .ob-flow-body h3 { color: var(--fg-base) !important; }
html[data-theme="burgundy"] .ob-ai-head small, html[data-theme="slate"] .ob-ai-head small,
html[data-theme="burgundy"] .ob-ai-stage p, html[data-theme="slate"] .ob-ai-stage p,
html[data-theme="burgundy"] .d2-dash-body > p, html[data-theme="slate"] .d2-dash-body > p,
html[data-theme="burgundy"] .ob-ai-bar, html[data-theme="slate"] .ob-ai-bar,
html[data-theme="burgundy"] .d2-dash-bar, html[data-theme="slate"] .d2-dash-bar,
html[data-theme="burgundy"] .d2-ds-bar, html[data-theme="slate"] .d2-ds-bar,
html[data-theme="burgundy"] .ob-flow-body p, html[data-theme="slate"] .ob-flow-body p,
html[data-theme="burgundy"] .d2-dash-kicker, html[data-theme="slate"] .d2-dash-kicker,
html[data-theme="burgundy"] .d2-ai-card .ob-micro, html[data-theme="slate"] .d2-ai-card .ob-micro { color: var(--fg-muted) !important; }
html[data-theme="burgundy"] .ob-ai-bar div, html[data-theme="slate"] .ob-ai-bar div,
html[data-theme="burgundy"] .d2-dash-bar .tr, html[data-theme="slate"] .d2-dash-bar .tr,
html[data-theme="burgundy"] .d2-ds-bar .tr, html[data-theme="slate"] .d2-ds-bar .tr { background: var(--t-mid) !important; }

/* light-theme ticker + liveband -> tinted, dark text */
html[data-theme="burgundy"] .od-ticker, html[data-theme="slate"] .od-ticker,
html[data-theme="burgundy"] .d2-liveband, html[data-theme="slate"] .d2-liveband,
html[data-theme="burgundy"] .d2-live-cell, html[data-theme="slate"] .d2-live-cell { background: var(--t-mid-deep) !important; color: var(--fg-base) !important; }
html[data-theme="burgundy"] .od-ticker-track span, html[data-theme="slate"] .od-ticker-track span,
html[data-theme="burgundy"] .d2-live-cell span, html[data-theme="slate"] .d2-live-cell span { color: var(--fg-muted) !important; }
html[data-theme="burgundy"] .od-ticker-track b, html[data-theme="slate"] .od-ticker-track b { color: var(--fg-base) !important; }

/* light-theme fork-right + doors */
html[data-theme="burgundy"] .ob-fork-right, html[data-theme="slate"] .ob-fork-right { background: var(--t-mid-deep) !important; color: var(--fg-base) !important; }
html[data-theme="burgundy"] .ob-fork-right p, html[data-theme="slate"] .ob-fork-right p,
html[data-theme="burgundy"] .ob-fork-right li, html[data-theme="slate"] .ob-fork-right li,
html[data-theme="burgundy"] .ob-door li, html[data-theme="slate"] .ob-door li { color: var(--fg-muted) !important; }
html[data-theme="burgundy"] .ob-door h3, html[data-theme="slate"] .ob-door h3 { color: var(--fg-base) !important; }
html[data-theme="burgundy"] .ob-door, html[data-theme="slate"] .ob-door { background: rgba(255,255,255,.5) !important; border-color: var(--border-base) !important; }

/* ---- INDIGO stays DARK: just surfaces + accent ---- */
html[data-theme="indigo"] .ob-hero, html[data-theme="indigo"] .d2-hero {
  background:
    radial-gradient(1100px 520px at 78% 18%, rgba(255,107,94,.26), transparent 60%),
    linear-gradient(160deg, #3B3A7A 0%, #2A2A5E 58%, #1C1B3A 100%) !important;
}
html[data-theme="indigo"] .ob-flow-card { background:#2A2A5E !important; }
html[data-theme="indigo"] .ob-ai-panel, html[data-theme="indigo"] .d2-dash, html[data-theme="indigo"] .d2-aigraph, html[data-theme="indigo"] .d2-ai-card { background:#16152E !important; }
html[data-theme="indigo"] .ob-btn-solid, html[data-theme="indigo"] .ob-btn-dark,
html[data-theme="indigo"] .ob-step-chip, html[data-theme="indigo"] .ob-flow-num, html[data-theme="indigo"] .ob-ring-core,
html[data-theme="indigo"] .d2-step-chip { color:#2a1512 !important; }

/* ============================================================
   SHARED accent recolor for ALL non-sage themes (sage handled by E block).
   Scoped to the 3 added themes so they don't fight the sage block.
   ============================================================ */
html[data-theme="burgundy"] .ob-h2 .hl, html[data-theme="indigo"] .ob-h2 .hl, html[data-theme="slate"] .ob-h2 .hl,
html[data-theme="burgundy"] .hl, html[data-theme="indigo"] .hl, html[data-theme="slate"] .hl,
html[data-theme="burgundy"] .ob-chapter-num, html[data-theme="indigo"] .ob-chapter-num, html[data-theme="slate"] .ob-chapter-num { color: var(--t-lead) !important; }

html[data-theme="burgundy"] .ob-btn-solid, html[data-theme="indigo"] .ob-btn-solid, html[data-theme="slate"] .ob-btn-solid,
html[data-theme="burgundy"] .ob-btn-dark, html[data-theme="indigo"] .ob-btn-dark, html[data-theme="slate"] .ob-btn-dark { background: var(--t-lead) !important; border-color: var(--t-lead) !important; }
html[data-theme="burgundy"] .header-actions .ob-btn-dark, html[data-theme="slate"] .header-actions .ob-btn-dark { background: var(--t-pop) !important; border-color: var(--t-pop) !important; }

html[data-theme="burgundy"] .ob-rail button.is-active i, html[data-theme="indigo"] .ob-rail button.is-active i, html[data-theme="slate"] .ob-rail button.is-active i { background: var(--t-lead); }
html[data-theme="burgundy"] .ob-rail button.is-active span, html[data-theme="indigo"] .ob-rail button.is-active span, html[data-theme="slate"] .ob-rail button.is-active span { color: var(--t-lead); }
html[data-theme="burgundy"] .od-spine-fill, html[data-theme="indigo"] .od-spine-fill, html[data-theme="slate"] .od-spine-fill { background: linear-gradient(var(--t-lead), var(--t-lead-deep)) !important; }

/* icons, bars, gauges, rings — accent */
html[data-theme="burgundy"] .ob-hair-ico, html[data-theme="indigo"] .ob-hair-ico, html[data-theme="slate"] .ob-hair-ico,
html[data-theme="burgundy"] .d2-cprog-fg, html[data-theme="indigo"] .d2-cprog-fg, html[data-theme="slate"] .d2-cprog-fg { color: var(--t-lead) !important; stroke: var(--t-lead) !important; }
html[data-theme="burgundy"] .d2-cprog-center b, html[data-theme="indigo"] .d2-cprog-center b, html[data-theme="slate"] .d2-cprog-center b { color: var(--t-lead) !important; }
html[data-theme="burgundy"] .ob-filled-bar, html[data-theme="indigo"] .ob-filled-bar, html[data-theme="slate"] .ob-filled-bar { background: var(--t-lead) !important; }
html[data-theme="burgundy"] .od-gauge-fill.aram, html[data-theme="indigo"] .od-gauge-fill.aram, html[data-theme="slate"] .od-gauge-fill.aram { background: linear-gradient(90deg, var(--t-lead), var(--t-lead-deep)) !important; }
html[data-theme="burgundy"] .od-gauge-fill.most, html[data-theme="slate"] .od-gauge-fill.most { background: var(--t-grey) !important; }

/* ring / orbit / nodes */
html[data-theme="burgundy"] .ob-ring, html[data-theme="indigo"] .ob-ring, html[data-theme="slate"] .ob-ring { border-color: var(--t-lead) !important; }
html[data-theme="burgundy"] .ob-ring-core, html[data-theme="indigo"] .ob-ring-core, html[data-theme="slate"] .ob-ring-core,
html[data-theme="burgundy"] .ob-orbit i, html[data-theme="indigo"] .ob-orbit i, html[data-theme="slate"] .ob-orbit i { background: var(--t-lead) !important; }
html[data-theme="burgundy"] .ob-node:hover, html[data-theme="slate"] .ob-node:hover { border-color: var(--t-lead) !important; color: var(--t-lead) !important; }
html[data-theme="burgundy"] .ob-mod-num, html[data-theme="indigo"] .ob-mod-num, html[data-theme="slate"] .ob-mod-num,
html[data-theme="burgundy"] .ob-mod-arrow, html[data-theme="indigo"] .ob-mod-arrow, html[data-theme="slate"] .ob-mod-arrow { color: var(--t-lead) !important; }

/* stepper / flow */
html[data-theme="burgundy"] .ob-stepper-line i, html[data-theme="indigo"] .ob-stepper-line i, html[data-theme="slate"] .ob-stepper-line i,
html[data-theme="burgundy"] .ob-step-chip, html[data-theme="indigo"] .ob-step-chip, html[data-theme="slate"] .ob-step-chip,
html[data-theme="burgundy"] .ob-flow-num, html[data-theme="indigo"] .ob-flow-num, html[data-theme="slate"] .ob-flow-num { background: var(--t-lead) !important; }
html[data-theme="burgundy"] .ob-flow-artifact, html[data-theme="indigo"] .ob-flow-artifact, html[data-theme="slate"] .ob-flow-artifact { color: var(--t-lead) !important; }

/* AI modules */
html[data-theme="burgundy"] .ob-ai-kicker, html[data-theme="indigo"] .ob-ai-kicker, html[data-theme="slate"] .ob-ai-kicker,
html[data-theme="burgundy"] .d2-dash-kicker, html[data-theme="indigo"] .d2-dash-kicker, html[data-theme="slate"] .d2-dash-kicker,
html[data-theme="burgundy"] .ob-ai-task b, html[data-theme="indigo"] .ob-ai-task b, html[data-theme="slate"] .ob-ai-task b { color: var(--t-lead) !important; }
html[data-theme="burgundy"] .ob-ai-bar div i, html[data-theme="indigo"] .ob-ai-bar div i, html[data-theme="slate"] .ob-ai-bar div i,
html[data-theme="burgundy"] .d2-dash-bar .tr i, html[data-theme="indigo"] .d2-dash-bar .tr i, html[data-theme="slate"] .d2-dash-bar .tr i,
html[data-theme="burgundy"] .d2-ds-bar .tr i, html[data-theme="indigo"] .d2-ds-bar .tr i, html[data-theme="slate"] .d2-ds-bar .tr i { background: var(--t-lead) !important; }
html[data-theme="burgundy"] .ob-ai-steps button.is-on, html[data-theme="indigo"] .ob-ai-steps button.is-on, html[data-theme="slate"] .ob-ai-steps button.is-on,
html[data-theme="burgundy"] .d2-dash-steps i.on, html[data-theme="indigo"] .d2-dash-steps i.on, html[data-theme="slate"] .d2-dash-steps i.on,
html[data-theme="burgundy"] .ob-ai-dot, html[data-theme="indigo"] .ob-ai-dot, html[data-theme="slate"] .ob-ai-dot,
html[data-theme="burgundy"] .d2-dash-top .dot, html[data-theme="indigo"] .d2-dash-top .dot, html[data-theme="slate"] .d2-dash-top .dot { background: var(--t-lead) !important; }
html[data-theme="burgundy"] .d2-dash-tab.on, html[data-theme="indigo"] .d2-dash-tab.on, html[data-theme="slate"] .d2-dash-tab.on { color: var(--t-lead) !important; border-color: var(--t-lead) !important; }

/* AI projection graph + rank bars + pie */
html[data-theme="burgundy"] .d2-ag-line, html[data-theme="indigo"] .d2-ag-line, html[data-theme="slate"] .d2-ag-line,
html[data-theme="burgundy"] .d2-ag-area, html[data-theme="indigo"] .d2-ag-area, html[data-theme="slate"] .d2-ag-area,
html[data-theme="burgundy"] .d2-ag-label, html[data-theme="indigo"] .d2-ag-label, html[data-theme="slate"] .d2-ag-label { stroke: var(--t-lead) !important; fill: var(--t-lead) !important; }
html[data-theme="burgundy"] .d2-ag-live, html[data-theme="indigo"] .d2-ag-live, html[data-theme="slate"] .d2-ag-live { stroke: var(--t-lead) !important; }
html[data-theme="burgundy"] .d2-rankbar .col, html[data-theme="indigo"] .d2-rankbar .col, html[data-theme="slate"] .d2-rankbar .col { background: linear-gradient(var(--t-lead), var(--t-lead-deep)) !important; }
html[data-theme="burgundy"] .d2-pie-center b, html[data-theme="slate"] .d2-pie-center b { color: var(--fg-base) !important; }

/* impact dashboard */
html[data-theme="burgundy"] .d2-impact-stats strong, html[data-theme="indigo"] .d2-impact-stats strong, html[data-theme="slate"] .d2-impact-stats strong,
html[data-theme="burgundy"] .d2-ba2-after .cap, html[data-theme="indigo"] .d2-ba2-after .cap, html[data-theme="slate"] .d2-ba2-after .cap,
html[data-theme="burgundy"] .d2-ba2-lift b, html[data-theme="indigo"] .d2-ba2-lift b, html[data-theme="slate"] .d2-ba2-lift b { color: var(--t-lead) !important; }
html[data-theme="burgundy"] .d2-ba2-after .bar, html[data-theme="indigo"] .d2-ba2-after .bar, html[data-theme="slate"] .d2-ba2-after .bar { background: linear-gradient(var(--t-lead), var(--t-lead-deep)) !important; }
html[data-theme="burgundy"] .d2-impact-card, html[data-theme="slate"] .d2-impact-card,
html[data-theme="burgundy"] .d2-impact-stats > div, html[data-theme="slate"] .d2-impact-stats > div { background: rgba(255,255,255,.6) !important; }

/* service bars + flip + chart (proof) */
html[data-theme="burgundy"] .ob-sbar:nth-child(1) div i, html[data-theme="indigo"] .ob-sbar:nth-child(1) div i, html[data-theme="slate"] .ob-sbar:nth-child(1) div i,
html[data-theme="burgundy"] .ob-face-front strong, html[data-theme="indigo"] .ob-face-front strong, html[data-theme="slate"] .ob-face-front strong,
html[data-theme="burgundy"] .d2-chart .climb, html[data-theme="indigo"] .d2-chart .climb, html[data-theme="slate"] .d2-chart .climb { color: var(--t-lead) !important; }
html[data-theme="burgundy"] .ob-sbar:nth-child(1) div i, html[data-theme="indigo"] .ob-sbar:nth-child(1) div i, html[data-theme="slate"] .ob-sbar:nth-child(1) div i,
html[data-theme="burgundy"] .d2-chart .climb, html[data-theme="indigo"] .d2-chart .climb, html[data-theme="slate"] .d2-chart .climb { stroke: var(--t-lead) !important; background: var(--t-lead) !important; }
html[data-theme="burgundy"] .ob-face-back, html[data-theme="indigo"] .ob-face-back, html[data-theme="slate"] .ob-face-back { background: var(--t-lead) !important; border-color: var(--t-lead) !important; }

/* CA strip per theme */
html[data-theme="indigo"] .ob-ca, html[data-theme="indigo"] .d2-ca { background:#5B8DEF !important; }
html[data-theme="burgundy"] .ob-ca, html[data-theme="slate"] .ob-ca { background: var(--t-pop) !important; }

/* trust note accent */
html[data-theme="burgundy"] .ob-trust-note, html[data-theme="indigo"] .ob-trust-note, html[data-theme="slate"] .ob-trust-note { border-left-color: var(--t-lead) !important; }

/* keep white text on accent fills (all added themes) */
html[data-theme="burgundy"] .ob-btn-solid, html[data-theme="slate"] .ob-btn-solid,
html[data-theme="burgundy"] .ob-step-chip, html[data-theme="slate"] .ob-step-chip,
html[data-theme="burgundy"] .ob-flow-num, html[data-theme="slate"] .ob-flow-num,
html[data-theme="burgundy"] .ob-ring-core, html[data-theme="slate"] .ob-ring-core,
html[data-theme="burgundy"] .ob-face-back, html[data-theme="slate"] .ob-face-back { color:#fff !important; }

/* ============================================================
   Theme picker UI (same as themed-B)
   ============================================================ */
.theme-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 520;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--ob-accent); color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); display: grid; place-items: center; font-size: 20px;
  transition: transform .2s ease;
}
.theme-fab:hover { transform: scale(1.08) rotate(15deg); }
.theme-panel {
  position: fixed; right: 20px; bottom: 82px; z-index: 520;
  background: #fff; border: 1px solid var(--border-base); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.2); padding: 16px; width: 230px;
  transform: translateY(12px) scale(.96); opacity: 0; pointer-events: none;
  transition: transform .25s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.theme-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.theme-panel h4 { margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color:#666; }
.theme-opt { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: 1px solid transparent; border-radius: 9px; padding: 9px 10px; cursor: pointer; margin-bottom: 4px; text-align: left; transition: background .15s ease, border-color .15s ease; }
.theme-opt:hover { background:#f5f3ef; }
.theme-opt.active { border-color: currentColor; background:#f5f3ef; }
.theme-opt .sw { width: 34px; height: 20px; border-radius: 5px; flex: none; display: flex; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.theme-opt .sw i { flex: 1; }
.theme-opt strong { font-size: 13px; color:#222; font-weight: 600; }
.theme-opt small { display: block; font-size: 10px; color:#999; }

/* FIX: selectors dropped by the auto-scoper, re-added scoped to sage */
html[data-theme="sage"] .d2-ag-grid { stroke: rgba(47,107,85,.1) !important; }
html[data-theme="sage"] .d2-cprog-track { stroke: var(--border-soft) !important; }
html[data-theme="sage"] .d2-impact-stats > div { background: rgba(255,255,255,.55) !important; }
html[data-theme="sage"] .ob-ai-panel { background: #fff !important;
  border: 1px solid var(--border-base) !important;
  color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-ai-stage small { color: var(--fg-subtle) !important; }
html[data-theme="sage"] .ob-chapter-num { color: var(--e-forest) !important; }
html[data-theme="sage"] .ob-cream-bg { background: var(--e-mint) !important; }
html[data-theme="sage"] .ob-hair-cell strong { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-rail i { background: var(--border-strong); }
html[data-theme="sage"] .ob-rail.on-dark button.is-active i { background: var(--e-forest); }
html[data-theme="sage"] .ob-ribbon { background: linear-gradient(90deg, var(--e-forest), var(--e-forest-deep)) !important; }
html[data-theme="sage"] .ob-strip { background: var(--e-mint) !important; border-block-color: var(--border-base) !important; }
html[data-theme="sage"] .od-ai-scrollnote { color: var(--fg-subtle) !important; }
html[data-theme="sage"] .od-ribbon { background: linear-gradient(90deg, var(--e-forest), var(--e-forest-deep)) !important; }
html[data-theme="sage"] .od-ribbon.d2 { background: linear-gradient(90deg, var(--e-forest), var(--e-forest-deep)) !important; }


/* ============================================================
   WARM — Option A's orangish / terracotta light theme (D2)
   ============================================================ */
html[data-theme="warm"] {
  /* Faithful to live ARAM site: warm page, terracotta accent, NAVY headings + CTAs */
  --ob-navy:#25324B; --ob-navy-deep:#1D293D; --ob-navy-ink:#EADFD5;
  --ob-accent:#CA664F; --ob-accent-soft:#EEE3D7; --ob-teal:#CA664F;
  --ob-cream:#F7F5F0; --ob-line:#E6DDD2; --ob-line-dark:rgba(37,50,75,.14);
  --fg-base:#20283A; --fg-muted:#5c6472; --fg-subtle:#8a92a0;
  --border-base:#E6DDD2; --border-soft:#EFE8DF; --border-strong:#cfc2b2;
  --brand-accent:#CA664F; --brand-primary:#25324B;
  --t-lead:#CA664F; --t-lead-deep:#B4553F; --t-mid:#F0E3D8; --t-mid-deep:#EADFD5;
  --t-light:#F7F2EB; --t-base:#F7F5F0; --t-pop:#CA664F; --t-grey:#C7BBAE; --t-dark:0;
  --t-navy:#25324B; --t-navy-deep:#1D293D;
}
html[data-theme="warm"] body { background: var(--t-base); }

/* former-dark sections -> warm tint + dark text */
html[data-theme="warm"] .ob-navy-bg, html[data-theme="warm"] .ob-ink-bg, html[data-theme="warm"] .d2-impact, html[data-theme="warm"] .d2-h-sec {
  background: var(--t-mid) !important; color: var(--fg-base) !important;
}
html[data-theme="warm"] .ob-ink-bg, html[data-theme="warm"] .d2-impact { background: var(--t-mid-deep) !important; }
html[data-theme="warm"] .ob-navy-bg .ob-micro, html[data-theme="warm"] .ob-ink-bg .ob-micro, html[data-theme="warm"] .d2-impact .ob-micro, html[data-theme="warm"] .d2-h-sec .ob-micro,
html[data-theme="warm"] .ob-navy-bg .ob-support, html[data-theme="warm"] .ob-ink-bg .ob-support, html[data-theme="warm"] .d2-impact .ob-support, html[data-theme="warm"] .d2-h-sec .ob-support,
html[data-theme="warm"] .ob-navy-bg .ob-chapter-name, html[data-theme="warm"] .ob-ink-bg .ob-chapter-name { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-navy-bg .ob-h2, html[data-theme="warm"] .ob-ink-bg .ob-h2, html[data-theme="warm"] .d2-impact .ob-h2, html[data-theme="warm"] .d2-h-sec .ob-h2 { color: var(--fg-base) !important; }

/* hero (LIGHT) */
html[data-theme="warm"] .ob-hero, html[data-theme="warm"] .d2-hero {
  background:
    radial-gradient(1000px 520px at 80% 15%, rgba(202,102,79,.22), transparent 60%),
    linear-gradient(165deg, #F7F2EB 0%, #F0E3D8 55%, #EADFD5 100%) !important;
  color: var(--fg-base) !important;
}
html[data-theme="warm"] .ob-hero h1, html[data-theme="warm"] .d2-hero h1 { color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-hero h1 .hl, html[data-theme="warm"] .d2-hero h1 .hl { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-lead { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-hero .ob-micro { color: var(--fg-subtle) !important; }
html[data-theme="warm"] .ob-hero-stats { background: rgba(255,255,255,.55) !important; border:1px solid rgba(202,102,79,.2) !important; }
html[data-theme="warm"] .ob-hero-stats strong { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-hero-stats span { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-hero-live { border-top-color: rgba(202,102,79,.16) !important; color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-hero-live b { color: var(--fg-base) !important; }

/* former-dark cards -> white + dark text */
html[data-theme="warm"] .ob-ai-panel, html[data-theme="warm"] .d2-dash, html[data-theme="warm"] .d2-aigraph, html[data-theme="warm"] .d2-ai-card, html[data-theme="warm"] .ob-flow-card { background:#fff !important; border:1px solid var(--border-base) !important; color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-ai-head strong, html[data-theme="warm"] .ob-ai-stage h4, html[data-theme="warm"] .d2-dash-body h4, html[data-theme="warm"] .d2-dash-top strong, html[data-theme="warm"] .d2-ai-card h5, html[data-theme="warm"] .ob-flow-body h3 { color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-ai-head small, html[data-theme="warm"] .ob-ai-stage p, html[data-theme="warm"] .d2-dash-body > p, html[data-theme="warm"] .ob-ai-bar, html[data-theme="warm"] .d2-dash-bar, html[data-theme="warm"] .d2-ds-bar, html[data-theme="warm"] .ob-flow-body p, html[data-theme="warm"] .d2-dash-kicker, html[data-theme="warm"] .d2-ai-card .ob-micro { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-ai-bar div, html[data-theme="warm"] .d2-dash-bar .tr, html[data-theme="warm"] .d2-ds-bar .tr { background: var(--t-mid) !important; }
html[data-theme="warm"] .ob-ai-panel .ob-ai-stage small, html[data-theme="warm"] .od-ai-scrollnote { color: var(--fg-subtle) !important; }

/* ticker + liveband -> warm tint */
html[data-theme="warm"] .od-ticker, html[data-theme="warm"] .d2-liveband, html[data-theme="warm"] .d2-live-cell { background: var(--t-mid-deep) !important; color: var(--fg-base) !important; }
html[data-theme="warm"] .od-ticker-track span, html[data-theme="warm"] .d2-live-cell span { color: var(--fg-muted) !important; }
html[data-theme="warm"] .od-ticker-track b { color: var(--fg-base) !important; }
html[data-theme="warm"] .d2-live-cell strong { color: var(--t-lead) !important; }

/* fork-right + doors */
html[data-theme="warm"] .ob-fork-right { background: var(--t-mid-deep) !important; color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-fork-right p, html[data-theme="warm"] .ob-fork-right li, html[data-theme="warm"] .ob-door li { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-door h3 { color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-door { background: rgba(255,255,255,.5) !important; border-color: var(--border-base) !important; }

/* accents */
html[data-theme="warm"] .ob-h2 .hl, html[data-theme="warm"] .hl, html[data-theme="warm"] .ob-chapter-num { color: var(--t-lead) !important; }
/* Primary CTAs NAVY (terracotta is accent only) */
html[data-theme="warm"] .ob-btn-solid, html[data-theme="warm"] .ob-btn-dark { background: var(--t-navy) !important; border-color: var(--t-navy) !important; }
html[data-theme="warm"] .ob-btn-solid { color:#fff !important; }
html[data-theme="warm"] .header-actions .ob-btn-dark { background: var(--t-navy) !important; border-color: var(--t-navy) !important; }
html[data-theme="warm"] .ob-rail button.is-active i { background: var(--t-lead); }
html[data-theme="warm"] .ob-rail button.is-active span { color: var(--t-lead); }
html[data-theme="warm"] .od-spine-fill { background: linear-gradient(var(--t-lead), var(--t-lead-deep)) !important; }
html[data-theme="warm"] .ob-hair-ico { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-hair-cell strong { color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-hair-cell em { color: var(--fg-subtle) !important; }
html[data-theme="warm"] .d2-cprog-fg { stroke: var(--t-lead) !important; }
html[data-theme="warm"] .d2-cprog-center b { color: var(--t-lead) !important; }
html[data-theme="warm"] .d2-cprog-track { stroke: var(--border-soft) !important; }
html[data-theme="warm"] .ob-filled-bar { background: var(--t-lead) !important; }
html[data-theme="warm"] .od-gauge-fill.aram { background: linear-gradient(90deg, var(--t-lead), var(--t-lead-deep)) !important; }
html[data-theme="warm"] .od-gauge-fill.most { background: var(--t-grey) !important; }
html[data-theme="warm"] .ob-ring { border-color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ring-core, html[data-theme="warm"] .ob-orbit i { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-node:hover { border-color: var(--t-lead) !important; color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-mod-num, html[data-theme="warm"] .ob-mod-arrow { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-stepper-line i, html[data-theme="warm"] .ob-step-chip, html[data-theme="warm"] .ob-flow-num { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-flow-artifact { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ai-kicker, html[data-theme="warm"] .d2-dash-kicker, html[data-theme="warm"] .ob-ai-task b { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ai-bar div i, html[data-theme="warm"] .d2-dash-bar .tr i, html[data-theme="warm"] .d2-ds-bar .tr i { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ai-steps button.is-on, html[data-theme="warm"] .d2-dash-steps i.on, html[data-theme="warm"] .ob-ai-dot, html[data-theme="warm"] .d2-dash-top .dot { background: var(--t-lead) !important; }
html[data-theme="warm"] .d2-dash-tab.on { color: var(--t-lead) !important; border-color: var(--t-lead) !important; }
html[data-theme="warm"] .d2-ag-line, html[data-theme="warm"] .d2-ag-area, html[data-theme="warm"] .d2-ag-label { stroke: var(--t-lead) !important; fill: var(--t-lead) !important; }
html[data-theme="warm"] .d2-ag-live { stroke: var(--t-lead) !important; }
html[data-theme="warm"] .d2-ag-grid { stroke: rgba(202,102,79,.1) !important; }
html[data-theme="warm"] .d2-rankbar .col { background: linear-gradient(var(--t-lead), var(--t-lead-deep)) !important; }
html[data-theme="warm"] .d2-pie-center b { color: var(--fg-base) !important; }
html[data-theme="warm"] .d2-impact-stats strong, html[data-theme="warm"] .d2-ba2-after .cap, html[data-theme="warm"] .d2-ba2-lift b { color: var(--t-lead) !important; }
html[data-theme="warm"] .d2-ba2-after .bar { background: linear-gradient(var(--t-lead), var(--t-lead-deep)) !important; }
html[data-theme="warm"] .d2-impact-card, html[data-theme="warm"] .d2-impact-stats > div { background: rgba(255,255,255,.6) !important; }
html[data-theme="warm"] .ob-sbar:nth-child(1) div i, html[data-theme="warm"] .d2-chart .climb { background: var(--t-lead) !important; stroke: var(--t-lead) !important; }
html[data-theme="warm"] .ob-face-front strong { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-face-back { background: var(--t-lead) !important; border-color: var(--t-lead) !important; color:#fff !important; }
html[data-theme="warm"] .ob-ca { background: var(--t-pop) !important; }
html[data-theme="warm"] .ob-trust-note { border-left-color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-cream-bg { background: var(--t-light) !important; }
html[data-theme="warm"] .ob-white-bg { background: var(--t-base) !important; }
html[data-theme="warm"] .ob-strip { background: var(--t-light) !important; }
html[data-theme="warm"] .ob-step-chip, html[data-theme="warm"] .ob-flow-num, html[data-theme="warm"] .ob-ring-core { color:#fff !important; }
html[data-theme="warm"] .ob-ribbon, html[data-theme="warm"] .od-ribbon, html[data-theme="warm"] .od-ribbon.d2 { background: linear-gradient(90deg, var(--t-lead), var(--t-lead-deep)) !important; }


/* ============================================================
   SAGE FIX #2 — dark D2 panels + terracotta accents that the
   auto-scoper left behind (AI dashboard, projection graph,
   rank bars, pie). Make them light/green.
   ============================================================ */

/* the panels that stayed dark: force white card + dark text */
html[data-theme="sage"] .d2-dash,
html[data-theme="sage"] .d2-aigraph,
html[data-theme="sage"] .d2-ai-card {
  background: #fff !important;
  border: 1px solid var(--border-base) !important;
  color: var(--fg-base) !important;
}

/* AI projection graph lines/area -> forest green */
html[data-theme="sage"] .d2-ag-line,
html[data-theme="sage"] .d2-ag-area,
html[data-theme="sage"] .d2-ag-label { stroke: var(--e-forest) !important; fill: var(--e-forest) !important; }
html[data-theme="sage"] .d2-ag-live { stroke: var(--e-forest) !important; fill: #fff !important; }
html[data-theme="sage"] .d2-ag-grid { stroke: rgba(47,107,85,.1) !important; }
html[data-theme="sage"] .d2-ag-axis { stroke: rgba(47,107,85,.22) !important; }

/* rank bars: main (non-dim) columns -> forest green (were terracotta) */
html[data-theme="sage"] .d2-rankbar .col { background: linear-gradient(var(--e-forest), var(--e-forest-deep)) !important; }
html[data-theme="sage"] .d2-rankbar.dim .col { background: rgba(47,107,85,.16) !important; }

/* strength pie: track + segments */
html[data-theme="sage"] .d2-pie .pie-track { stroke: var(--e-sage) !important; }
html[data-theme="sage"] .d2-pie-center b { color: var(--fg-base) !important; }
html[data-theme="sage"] .d2-pie-legend div { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-pie-legend b { color: var(--fg-base) !important; }

/* dashboard tabs + card headers on now-light panels */
html[data-theme="sage"] .d2-dash-tab { color: var(--fg-subtle) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .d2-dash-tab.on { color: var(--e-forest) !important; border-color: var(--e-forest) !important; background: var(--e-mint) !important; }
html[data-theme="sage"] .d2-ai-card-head .st { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-ds-chip { color: var(--fg-muted) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .d2-ds-chip.strong { color: var(--e-forest) !important; border-color: rgba(47,107,85,.4) !important; }
html[data-theme="sage"] .d2-ds-item { color: var(--fg-muted) !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .d2-ds-item .chk { border-color: var(--e-forest) !important; color: var(--e-forest) !important; }
html[data-theme="sage"] .d2-ds-item.done .chk { background: var(--e-forest) !important; }
html[data-theme="sage"] .d2-dash-top strong, html[data-theme="sage"] .d2-ai-card h5 { color: var(--fg-base) !important; }
html[data-theme="sage"] .d2-ai-card .ob-micro { color: var(--fg-muted) !important; }
html[data-theme="sage"] .d2-rankbar .col::after { color: #fff !important; }


/* ============================================================
   Heatmap coverage ramps per theme (JS reads --heat-0..3)
   + legend swatch overrides to match.
   ============================================================ */
html[data-theme="burgundy"] { --heat-0: rgba(126,42,59,.16); --heat-1: rgba(126,42,59,.4); --heat-2: rgba(126,42,59,.66); --heat-3: #B08431; }
html[data-theme="slate"]    { --heat-0: rgba(31,122,140,.16); --heat-1: rgba(31,122,140,.42); --heat-2: rgba(31,122,140,.68); --heat-3: #37A0B3; }
html[data-theme="warm"]     { --heat-0: rgba(202,102,79,.18); --heat-1: rgba(202,102,79,.44); --heat-2: rgba(202,102,79,.7); --heat-3: #25324B; }
html[data-theme="indigo"]   { --heat-0: rgba(255,107,94,.22); --heat-1: rgba(255,107,94,.5); --heat-2: rgba(255,107,94,.78); --heat-3: #5fbf8f; }

/* legend swatches follow the active theme ramp */
html[data-theme] .d2-heat-legend .ramp i:nth-child(1) { background: var(--heat-0, rgba(202,102,79,.25)) !important; }
html[data-theme] .d2-heat-legend .ramp i:nth-child(2) { background: var(--heat-1, rgba(202,102,79,.5)) !important; }
html[data-theme] .d2-heat-legend .ramp i:nth-child(3) { background: var(--heat-2, rgba(202,102,79,.75)) !important; }
html[data-theme] .d2-heat-legend .ramp i:nth-child(4) { background: var(--heat-3, #5fbf8f) !important; }

/* base heatcell for the other light themes: no !important so JS paint wins */
html[data-theme="burgundy"] .d2-heatcell, html[data-theme="slate"] .d2-heatcell, html[data-theme="warm"] .d2-heatcell { background: rgba(0,0,0,.04); }