/* ============================================================
   ARAM IAS — Option B (Themed): one build, switchable palettes.
   Each theme scoped under html[data-theme="..."].
   "original" = B's built-in navy+terracotta (no overrides needed).
   Themes: sage | burgundy | indigo | slate
   Loaded LAST so scoped rules win over option-b.css.
   ============================================================ */

/* ---- shared: token remaps per theme (drive 90% of the recolor) ---- */
html[data-theme="sage"] {
  --ob-navy:#2F6B55; --ob-navy-deep:#255645; --ob-navy-ink:#CBDED1;
  --ob-accent:#2F6B55; --ob-accent-soft:#E3EFE7; --ob-teal:#3E7F86;
  --ob-cream:#F6F6F1; --ob-line:#D7E0D7;
  --fg-base:#203A30; --fg-muted:#566b60; --fg-subtle:#7d8d82;
  --border-base:#D7E0D7; --border-soft:#E6ECE6; --border-strong:#Bccabd;
  --brand-accent:#2F6B55; --brand-primary:#2F6B55;
  --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;
}
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;
  --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;
}
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;
  --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;
}
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;
  --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;
}

/* =============================================================
   LIGHT themes (sage, burgundy, slate): convert former-dark
   sections to tinted panels with dark text. Indigo stays DARK.
   ============================================================= */
html[data-theme="sage"] body,
html[data-theme="burgundy"] body,
html[data-theme="slate"] body { background: var(--t-base); }

/* former dark sections -> mid tint + dark text (light themes only) */
html[data-theme="sage"] .ob-navy-bg, html[data-theme="sage"] .ob-ink-bg,
html[data-theme="burgundy"] .ob-navy-bg, html[data-theme="burgundy"] .ob-ink-bg,
html[data-theme="slate"] .ob-navy-bg, html[data-theme="slate"] .ob-ink-bg {
  background: var(--t-mid) !important; color: var(--fg-base) !important;
}
html[data-theme="sage"] .ob-ink-bg,
html[data-theme="burgundy"] .ob-ink-bg,
html[data-theme="slate"] .ob-ink-bg { background: var(--t-mid-deep) !important; }

html[data-theme="sage"] .ob-navy-bg .ob-micro, html[data-theme="sage"] .ob-ink-bg .ob-micro,
html[data-theme="sage"] .ob-navy-bg .ob-support, html[data-theme="sage"] .ob-ink-bg .ob-support,
html[data-theme="sage"] .ob-navy-bg .ob-chapter-name, html[data-theme="sage"] .ob-ink-bg .ob-chapter-name,
html[data-theme="burgundy"] .ob-navy-bg .ob-micro, html[data-theme="burgundy"] .ob-ink-bg .ob-micro,
html[data-theme="burgundy"] .ob-navy-bg .ob-support, html[data-theme="burgundy"] .ob-ink-bg .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"] .ob-navy-bg .ob-support, html[data-theme="slate"] .ob-ink-bg .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="sage"] .ob-navy-bg .ob-h2, html[data-theme="sage"] .ob-ink-bg .ob-h2,
html[data-theme="burgundy"] .ob-navy-bg .ob-h2, html[data-theme="burgundy"] .ob-ink-bg .ob-h2,
html[data-theme="slate"] .ob-navy-bg .ob-h2, html[data-theme="slate"] .ob-ink-bg .ob-h2 { color: var(--fg-base) !important; }

html[data-theme="sage"] .ob-navy-bg, html[data-theme="sage"] .ob-ink-bg,
html[data-theme="burgundy"] .ob-navy-bg, html[data-theme="burgundy"] .ob-ink-bg,
html[data-theme="slate"] .ob-navy-bg, html[data-theme="slate"] .ob-ink-bg {
  --ob-line-dark: color-mix(in srgb, var(--t-lead) 16%, transparent);
}

/* hero (light themes) */
html[data-theme="sage"] .ob-hero,
html[data-theme="burgundy"] .ob-hero,
html[data-theme="slate"] .ob-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="sage"] .ob-hero h1, html[data-theme="burgundy"] .ob-hero h1, html[data-theme="slate"] .ob-hero h1 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-hero .ob-lead, html[data-theme="burgundy"] .ob-hero .ob-lead, html[data-theme="slate"] .ob-hero .ob-lead { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-hero .ob-micro, html[data-theme="burgundy"] .ob-hero .ob-micro, html[data-theme="slate"] .ob-hero .ob-micro { color: var(--fg-subtle) !important; }
html[data-theme="sage"] .ob-hero-stats, 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="sage"] .ob-hero-stats div + div, html[data-theme="burgundy"] .ob-hero-stats div + div, html[data-theme="slate"] .ob-hero-stats div + div { border-left: 1px solid color-mix(in srgb, var(--t-lead) 16%, transparent) !important; }
html[data-theme="sage"] .ob-hero-live, html[data-theme="burgundy"] .ob-hero-live, html[data-theme="slate"] .ob-hero-live { border-top-color: color-mix(in srgb, var(--t-lead) 16%, transparent) !important; color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-hero-live b, html[data-theme="burgundy"] .ob-hero-live b, html[data-theme="slate"] .ob-hero-live b { color: var(--fg-base) !important; }

/* light-theme card/panels that were dark: ring, flow, AI, fork-right */
html[data-theme="sage"] .ob-flow-card, html[data-theme="burgundy"] .ob-flow-card, html[data-theme="slate"] .ob-flow-card,
html[data-theme="sage"] .ob-ai-panel, html[data-theme="burgundy"] .ob-ai-panel, html[data-theme="slate"] .ob-ai-panel { background: #fff !important; border-color: var(--border-base) !important; }
html[data-theme="sage"] .ob-ai-head strong, html[data-theme="burgundy"] .ob-ai-head strong, html[data-theme="slate"] .ob-ai-head strong,
html[data-theme="sage"] .ob-ai-stage h4, html[data-theme="burgundy"] .ob-ai-stage h4, html[data-theme="slate"] .ob-ai-stage h4,
html[data-theme="sage"] .ob-flow-body h3, html[data-theme="burgundy"] .ob-flow-body h3, html[data-theme="slate"] .ob-flow-body h3 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-ai-head small, html[data-theme="burgundy"] .ob-ai-head small, html[data-theme="slate"] .ob-ai-head small,
html[data-theme="sage"] .ob-ai-stage p, html[data-theme="burgundy"] .ob-ai-stage p, html[data-theme="slate"] .ob-ai-stage p,
html[data-theme="sage"] .ob-flow-body p, html[data-theme="burgundy"] .ob-flow-body p, html[data-theme="slate"] .ob-flow-body p,
html[data-theme="sage"] .ob-ai-bar, html[data-theme="burgundy"] .ob-ai-bar, html[data-theme="slate"] .ob-ai-bar { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-ai-bar div, html[data-theme="burgundy"] .ob-ai-bar div, html[data-theme="slate"] .ob-ai-bar div { background: var(--t-mid) !important; }
html[data-theme="sage"] .ob-node, html[data-theme="burgundy"] .ob-node, html[data-theme="slate"] .ob-node { background:#fff !important; border-color: var(--border-base) !important; color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-fork-right, 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="sage"] .ob-fork-right p, html[data-theme="burgundy"] .ob-fork-right p, html[data-theme="slate"] .ob-fork-right p,
html[data-theme="sage"] .ob-fork-right li, html[data-theme="burgundy"] .ob-fork-right li, html[data-theme="slate"] .ob-fork-right li { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-door, 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; }
html[data-theme="sage"] .ob-door h3, html[data-theme="burgundy"] .ob-door h3, html[data-theme="slate"] .ob-door h3 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-door li, html[data-theme="burgundy"] .ob-door li, html[data-theme="slate"] .ob-door li { color: var(--fg-muted) !important; }

/* INDIGO stays dark: just recolor surfaces + accent (handled by token remap) */
html[data-theme="indigo"] .ob-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: var(--ob-navy-deep) !important; }
html[data-theme="indigo"] .ob-ai-panel { background: #16152E !important; }
html[data-theme="indigo"] .ob-btn-solid, html[data-theme="indigo"] .ob-btn-dark { color:#2a1512 !important; }
html[data-theme="indigo"] .ob-ring-core, html[data-theme="indigo"] .ob-step-chip, html[data-theme="indigo"] .ob-flow-num { color:#2a1512 !important; }

/* =============================================================
   SHARED accent recolors (all 4 themes) via remapped tokens.
   These mostly inherit --ob-accent already; a few need explicit
   hooks where B hardcodes colors.
   ============================================================= */
html[data-theme] .ob-h2 .hl, html[data-theme] .hl,
html[data-theme] .ob-chapter-num { color: var(--t-lead) !important; }

/* buttons */
html[data-theme] .ob-btn-solid { background: var(--t-lead) !important; border-color: var(--t-lead) !important; }
html[data-theme] .ob-btn-solid:hover { background: var(--t-lead-deep) !important; }
html[data-theme] .ob-btn-dark { background: var(--t-lead) !important; border-color: var(--t-lead) !important; }
html[data-theme="sage"] .header-actions .ob-btn-dark,
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; }

/* rail */
html[data-theme] .ob-rail button.is-active i { background: var(--t-lead); }
html[data-theme] .ob-rail button.is-active span { color: var(--t-lead); }
html[data-theme] .ob-rail.on-dark button.is-active i { background: var(--t-lead); }

/* chart / bars / rings / pills */
html[data-theme] .ob-hair-ico { color: var(--t-lead) !important; }
html[data-theme] .ob-filled-bar { background: var(--t-lead) !important; }
html[data-theme] .ob-fill-accent { background: var(--t-lead) !important; }
html[data-theme] .ob-fill-grey { background: var(--t-grey) !important; }
html[data-theme] .ob-axis span.is-aram { color: var(--t-lead) !important; }
html[data-theme] .ob-ring { border-color: var(--t-lead) !important; }
html[data-theme] .ob-ring-core { background: var(--t-lead) !important; }
html[data-theme] .ob-node:hover { border-color: var(--t-lead) !important; color: var(--t-lead) !important; }
html[data-theme] .ob-orbit i { background: var(--t-lead) !important; }
html[data-theme] .ob-mod-num, html[data-theme] .ob-mod-arrow { color: var(--t-lead) !important; }
html[data-theme] .ob-stepper-line i { background: var(--t-lead) !important; }
html[data-theme] .ob-step-chip { background: var(--t-lead) !important; }
html[data-theme] .ob-flow-num { background: var(--t-lead) !important; }
html[data-theme] .ob-flow-artifact { color: var(--t-lead) !important; }
html[data-theme] .ob-ai-kicker { color: var(--t-lead) !important; }
html[data-theme] .ob-ai-bar div i { background: var(--t-lead) !important; }
html[data-theme] .ob-ai-task b { color: var(--t-lead) !important; }
html[data-theme] .ob-ai-steps button.is-on { background: var(--t-lead) !important; }
html[data-theme] .ob-ai-dot { background: var(--t-lead) !important; }
html[data-theme] .ob-sbar div i { background: var(--t-lead-deep) !important; }
html[data-theme] .ob-sbar:nth-child(1) div i { background: var(--t-lead) !important; }
html[data-theme] .ob-ba-after i { background: var(--t-lead) !important; }
html[data-theme] .ob-ba-before i { background: var(--t-grey) !important; }
html[data-theme] .ob-ba-lift b { color: var(--t-lead) !important; }
html[data-theme] .ob-face-front strong { color: var(--t-lead) !important; }
html[data-theme] .ob-face-back { background: var(--t-lead) !important; border-color: var(--t-lead) !important; }
html[data-theme] .ob-trust-note { border-left-color: var(--t-lead) !important; }
html[data-theme] .ob-fork li::before, html[data-theme] .ob-door li::before { color: var(--t-lead) !important; }

/* CA strip: colored band per theme */
html[data-theme="sage"] .ob-ca { background: var(--t-lead) !important; }
html[data-theme="indigo"] .ob-ca { background: #5B8DEF !important; }
html[data-theme="burgundy"] .ob-ca { background: var(--t-pop) !important; color:#2b2016 !important; }
html[data-theme="slate"] .ob-ca { background: var(--t-pop) !important; color:#2a1d08 !important; }
html[data-theme="burgundy"] .ob-ca h3, html[data-theme="slate"] .ob-ca h3 { color: inherit !important; }

/* ============================================================
   Theme picker UI
   ============================================================ */
.theme-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 310;
  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: 310;
  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; }
@media (max-width: 600px) { .theme-panel { width: 200px; } }

/* ============================================================
   TEXT-COLOR AUDIT FIX (2026)
   Light themes (sage, burgundy, slate): B hardcodes white text in
   many places that inherit from `.ob-navy-bg{color:#fff}`. On a
   light-tinted section that text goes invisible/faded. Force dark
   ink for every text element inside former-dark sections.
   Indigo stays dark, so it is intentionally excluded.
   ============================================================ */

/* Base inherited text color inside former-dark sections -> dark ink */
html[data-theme="sage"] .ob-navy-bg,  html[data-theme="sage"] .ob-ink-bg,
html[data-theme="burgundy"] .ob-navy-bg, html[data-theme="burgundy"] .ob-ink-bg,
html[data-theme="slate"] .ob-navy-bg, html[data-theme="slate"] .ob-ink-bg { color: var(--fg-base) !important; }

/* Hairline grid cells — the reported bug */
html[data-theme="sage"] .ob-hair-cell strong,
html[data-theme="burgundy"] .ob-hair-cell strong,
html[data-theme="slate"] .ob-hair-cell strong { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-hair-cell em,
html[data-theme="burgundy"] .ob-hair-cell em,
html[data-theme="slate"] .ob-hair-cell em { color: var(--fg-subtle) !important; }

/* Hero stats */
html[data-theme="sage"] .ob-hero-stats strong, html[data-theme="burgundy"] .ob-hero-stats strong, html[data-theme="slate"] .ob-hero-stats strong { color: var(--t-lead) !important; }
html[data-theme="sage"] .ob-hero-stats span, html[data-theme="burgundy"] .ob-hero-stats span, html[data-theme="slate"] .ob-hero-stats span { color: var(--fg-muted) !important; }

/* Chapter name + numerals inside former-dark sections */
html[data-theme="sage"] .ob-navy-bg .ob-chapter-name, html[data-theme="sage"] .ob-ink-bg .ob-chapter-name,
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-chapter-name, html[data-theme="slate"] .ob-ink-bg .ob-chapter-name { color: var(--fg-subtle) !important; }

/* Flow cards (The Climb) — light themes: white card, so dark text */
html[data-theme="sage"] .ob-flow-body h3, html[data-theme="burgundy"] .ob-flow-body h3, html[data-theme="slate"] .ob-flow-body h3 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-flow-body p, html[data-theme="burgundy"] .ob-flow-body p, html[data-theme="slate"] .ob-flow-body p { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-flow-card .ob-flow-month, html[data-theme="burgundy"] .ob-flow-card .ob-flow-month, html[data-theme="slate"] .ob-flow-card .ob-flow-month { color: var(--t-lead) !important; }

/* ARAM AI panel — light themes: white panel, dark text */
html[data-theme="sage"] .ob-ai-head strong, html[data-theme="burgundy"] .ob-ai-head strong, html[data-theme="slate"] .ob-ai-head strong,
html[data-theme="sage"] .ob-ai-stage h4, html[data-theme="burgundy"] .ob-ai-stage h4, html[data-theme="slate"] .ob-ai-stage h4,
html[data-theme="sage"] .ob-ai-task, html[data-theme="burgundy"] .ob-ai-task, html[data-theme="slate"] .ob-ai-task { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-ai-head small, html[data-theme="burgundy"] .ob-ai-head small, html[data-theme="slate"] .ob-ai-head small,
html[data-theme="sage"] .ob-ai-stage p, html[data-theme="burgundy"] .ob-ai-stage p, html[data-theme="slate"] .ob-ai-stage p,
html[data-theme="sage"] .ob-ai-bar, html[data-theme="burgundy"] .ob-ai-bar, html[data-theme="slate"] .ob-ai-bar { color: var(--fg-muted) !important; }

/* Fork-right (light themes: tinted panel, dark text) */
html[data-theme="sage"] .ob-fork-right p, html[data-theme="burgundy"] .ob-fork-right p, html[data-theme="slate"] .ob-fork-right p,
html[data-theme="sage"] .ob-fork-right li, html[data-theme="burgundy"] .ob-fork-right li, html[data-theme="slate"] .ob-fork-right li { color: var(--fg-muted) !important; }

/* Doors (Walk In) light themes */
html[data-theme="sage"] .ob-door h3, html[data-theme="burgundy"] .ob-door h3, html[data-theme="slate"] .ob-door h3 { color: var(--fg-base) !important; }
html[data-theme="sage"] .ob-door li, html[data-theme="burgundy"] .ob-door li, html[data-theme="slate"] .ob-door li { color: var(--fg-muted) !important; }

/* Trust note light themes */
html[data-theme="sage"] .ob-trust-note, html[data-theme="burgundy"] .ob-trust-note, html[data-theme="slate"] .ob-trust-note { color: var(--fg-muted) !important; }
html[data-theme="sage"] .ob-trust-note strong, html[data-theme="burgundy"] .ob-trust-note strong, html[data-theme="slate"] .ob-trust-note strong { color: var(--fg-base) !important; }

/* Flip card BACK stays colored (ob-face-back = accent fill) -> keep WHITE text.
   Explicitly re-assert white so the light-theme base rule above doesn't darken it. */
html[data-theme] .ob-face-back,
html[data-theme] .ob-face-back dt,
html[data-theme] .ob-face-back dd,
html[data-theme] .ob-face-back .ob-micro { color: #fff !important; }
html[data-theme] .ob-face-back dt, html[data-theme] .ob-face-back .ob-micro { color: rgba(255,255,255,.72) !important; }

/* Buttons that sit on accent fills keep white text regardless of theme */
html[data-theme] .ob-btn-solid { color: #fff !important; }
html[data-theme="indigo"] .ob-btn-solid, html[data-theme="indigo"] .ob-btn-dark { color: #2a1512 !important; }

/* CA strip keeps its own on-band text colors (set earlier) — don't darken */
html[data-theme="sage"] .ob-ca *, html[data-theme="indigo"] .ob-ca * { color: #fff !important; }
html[data-theme="burgundy"] .ob-ca *, html[data-theme="slate"] .ob-ca * { color: #2b2016 !important; }

/* Step chip / flow num / ring core: keep readable text on accent fills */
html[data-theme] .ob-step-chip, html[data-theme] .ob-flow-num, html[data-theme] .ob-ring-core { color: #fff !important; }
html[data-theme="indigo"] .ob-step-chip, html[data-theme="indigo"] .ob-flow-num, html[data-theme="indigo"] .ob-ring-core { color: #2a1512 !important; }

/* ============================================================
   WARM — Option A's orangish / terracotta light theme
   Warm cream page, terracotta lead accent, navy for depth.
   Light theme: former-dark sections -> warm tint, dark text.
   ============================================================ */
html[data-theme="warm"] {
  /* Faithful to the live ARAM site: warm off-white page, terracotta accent,
     NAVY headings + NAVY primary CTA (terracotta is the accent/link colour). */
  --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 = terracotta accent; t-pop = navy; headings use fg-base (navy-ink) */
  --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-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 { background: var(--t-mid) !important; color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-ink-bg { 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"] .ob-navy-bg .ob-support, html[data-theme="warm"] .ob-ink-bg .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 { color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-navy-bg, html[data-theme="warm"] .ob-ink-bg { --ob-line-dark: rgba(202,102,79,.16); }

/* hero */
html[data-theme="warm"] .ob-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 { color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-hero h1 .hl { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-hero .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; }

/* hairline grid */
html[data-theme="warm"] .ob-navy-bg, html[data-theme="warm"] .ob-ink-bg { color: var(--fg-base) !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"] .ob-hair-ico { color: var(--t-lead) !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 are NAVY (like the live site's "Talk to ARAM" pill); terracotta is accent only */
html[data-theme="warm"] .ob-btn-solid { background: var(--t-navy) !important; border-color: var(--t-navy) !important; color:#fff !important; }
html[data-theme="warm"] .ob-btn-solid:hover { background: var(--t-navy-deep) !important; }
html[data-theme="warm"] .ob-btn-dark { background: var(--t-navy) !important; border-color: var(--t-navy) !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); }

/* chart / bars / pills */
html[data-theme="warm"] .ob-filled-bar { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-fill-accent { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-fill-grey { background: var(--t-grey) !important; }
html[data-theme="warm"] .ob-chart { background:#fff !important; border-color: var(--border-base) !important; color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-track { background: var(--t-mid) !important; }
html[data-theme="warm"] .ob-axis span.is-aram { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-pill { background:#fff !important; border-color: var(--border-base) !important; color: var(--fg-muted) !important; }

/* ring */
html[data-theme="warm"] .ob-ring { border-color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ring-core { background: var(--t-lead) !important; color:#fff !important; }
html[data-theme="warm"] .ob-node { background:#fff !important; border-color: var(--border-base) !important; color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-node:hover { border-color: var(--t-lead) !important; color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-orbit i { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-mod-num, html[data-theme="warm"] .ob-mod-arrow { color: var(--t-lead) !important; }

/* stepper + flow */
html[data-theme="warm"] .ob-stepper-line i { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-step-chip { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-flow-card { background:#fff !important; border-color: var(--border-base) !important; }
html[data-theme="warm"] .ob-flow-num { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-flow-body h3 { color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-flow-body p { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-flow-artifact { color: var(--t-lead) !important; }

/* ARAM AI panel */
html[data-theme="warm"] .ob-ai-panel { background:#fff !important; border-color: var(--border-base) !important; }
html[data-theme="warm"] .ob-ai-head strong, html[data-theme="warm"] .ob-ai-stage h4 { 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"] .ob-ai-bar { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-ai-kicker { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ai-bar div { background: var(--t-mid) !important; }
html[data-theme="warm"] .ob-ai-bar div i { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ai-task { border-color: rgba(202,102,79,.4) !important; color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-ai-task b { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ai-steps button.is-on { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ai-dot { background: var(--t-lead) !important; }

/* CA strip -> terracotta band (like the live site's orange announcement bar) */
html[data-theme="warm"] .ob-ca { background: var(--t-lead) !important; color:#fff !important; }
html[data-theme="warm"] .ob-ca * { color:#fff !important; }

/* proof */
html[data-theme="warm"] .ob-sbar div { background: var(--t-mid) !important; }
html[data-theme="warm"] .ob-sbar div i { background: var(--t-lead-deep) !important; }
html[data-theme="warm"] .ob-sbar:nth-child(1) div i { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ba { background:#fff !important; border-color: var(--border-base) !important; }
html[data-theme="warm"] .ob-ba-col div { background: var(--t-mid) !important; }
html[data-theme="warm"] .ob-ba-before i { background: var(--t-grey) !important; }
html[data-theme="warm"] .ob-ba-after i { background: var(--t-lead) !important; }
html[data-theme="warm"] .ob-ba-lift b { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-flip .ob-face { background:#fff !important; border-color: var(--border-base) !important; }
html[data-theme="warm"] .ob-face-front strong { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-face-front p { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-face-back { background: var(--t-lead) !important; border-color: var(--t-lead) !important; color:#fff !important; }

/* filmstrip, fork, doors */
html[data-theme="warm"] .ob-strip { background: var(--t-light) !important; border-block-color: var(--border-base) !important; }
html[data-theme="warm"] .ob-fork-left { background: var(--t-light) !important; }
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 { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-fork h3 { color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-fork li::before, html[data-theme="warm"] .ob-door li::before { color: var(--t-lead) !important; }
html[data-theme="warm"] .ob-door { background: rgba(255,255,255,.5) !important; border-color: var(--border-base) !important; }
html[data-theme="warm"] .ob-door:hover { background: var(--t-light) !important; }
html[data-theme="warm"] .ob-door h3 { color: var(--fg-base) !important; }
html[data-theme="warm"] .ob-door li { color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-trust-note { border-color: var(--border-base) !important; border-left-color: var(--t-lead) !important; color: var(--fg-muted) !important; }
html[data-theme="warm"] .ob-trust-note strong { color: var(--fg-base) !important; }

/* backgrounds + accent-fill white text */
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-band { background: var(--t-mid-deep) !important; }
html[data-theme="warm"] .ob-step-chip, html[data-theme="warm"] .ob-flow-num, html[data-theme="warm"] .ob-ring-core, html[data-theme="warm"] .ob-btn-solid { color:#fff !important; }
html[data-theme="warm"] .ob-ribbon { background: linear-gradient(90deg, var(--t-lead), var(--t-lead-deep)) !important; }