/* ============================================================================
   LIGHT MODE — element patches
   The light PALETTE lives in cathedral.css (:root[data-theme="light"]), which
   re-skins everything that flows through the --c-* / legacy tokens. This file
   only patches HARD-CODED dark colors in the other stylesheets that don't read
   from tokens. Loaded LAST on every page so it always wins the cascade.
   Removable by deleting this file + its <link> on each page.
   ========================================================================== */

/* ---- Legacy token re-point ----
   On the tool pages (stewardship-map / project-map) the chief.css bundle loads
   AFTER cathedral.css and redefines the legacy names (--bg, --surface, …) with
   hard-coded darks, so cathedral's light remap loses. This sheet loads last, so
   re-point every legacy name at the (already-light) --c-* tokens here. */
html[data-theme="light"] {
  --paper: var(--c-bg);
  --bg: var(--c-bg);
  --bg-deep: var(--c-bg-deep);
  --surface: var(--c-surface);
  --surface-2: var(--c-surface-2);
  --surface-3: var(--c-surface-3);
  --panel: var(--c-panel);
  --sand: var(--c-surface-2);
  --sky: var(--c-surface-2);
  --rose: var(--c-surface-2);
  --ink-dark: var(--c-ink-dark);
  --ink: var(--c-cream);
  --cream: var(--c-surface);
  --cream-bright: var(--c-cream-bright);
  --muted: var(--c-muted);
  --muted-2: var(--c-muted-2);
  --muted-3: var(--c-muted-3);
  --forest-950: var(--c-bg-deep);
  --forest-900: var(--c-surface);
  --forest-800: var(--c-surface-2);
  --forest-700: var(--c-surface-3);
  --line: var(--c-hairline);
  --line-bright: var(--c-hairline-strong);
  --line-strong: var(--c-hairline-strong);
}

/* ---- Chief tool shell (stewardship-map / project-map) ----
   chief.css has its OWN palette vars and re-points the legacy tokens to them,
   including `body { background: var(--near-black) !important }`. Overriding
   chief's own vars (higher specificity than html.chief) re-skins the whole
   shell and defeats the !important, because it flows through the same var. */
html.chief[data-theme="light"] {
  --near-black: #EBE3D1;   /* page background */
  --dark1:      #F6F1E6;   /* sidebar / wide panels */
  --dark2:      #ffffff;   /* cards / surfaces */
  --dark3:      #EFE8D8;   /* inset rows */
  --surface-3:  #EFE8D8;
  --dark-border: rgba(60, 48, 24, 0.16);
  --line-bright: rgba(60, 48, 24, 0.26);
  --text-light:  rgba(38, 33, 24, 0.90);
  --text-mid:    rgba(38, 33, 24, 0.56);
  --text-muted:  rgba(38, 33, 24, 0.42);
  --gold:        #8a6d3b;
  --gold-light:  #a6822f;
  --gold-dark:   #6e5530;
  --shadow-sm: 0 2px 12px rgba(40, 30, 12, 0.12);
  --shadow-md: 0 16px 42px rgba(40, 30, 12, 0.17);
  --shadow-lg: 0 24px 58px rgba(40, 30, 12, 0.20);
}
/* chief header uses a hard-coded near-black gradient */
html.chief[data-theme="light"] .cos-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(138, 109, 59, 0.20);
}
html.chief[data-theme="light"] .cos-sidebar { border-right: 1px solid var(--dark-border); }
/* headings across the chief shell hard-code #fff — force dark on light */
html.chief[data-theme="light"] .cos-title,
html.chief[data-theme="light"] .topbar h1,
html.chief[data-theme="light"] .cos-content h1,
html.chief[data-theme="light"] .cos-content h2,
html.chief[data-theme="light"] .cos-content h3,
html.chief[data-theme="light"] .project-map-stat strong,
html.chief[data-theme="light"] .project-template-strip h3,
html.chief[data-theme="light"] dialog h2,
html.chief[data-theme="light"] .integration-card h3 { color: var(--text-light); }
/* dark-green "mission / servant" + project-intro panels → soft evergreen card */
html.chief[data-theme="light"] .mission-strip,
html.chief[data-theme="light"] .project-map-intro {
  background: linear-gradient(135deg, rgba(45,90,39,0.10) 0%, rgba(45,90,39,0.05) 100%);
  border: 1px solid rgba(45,90,39,0.28);
}
html.chief[data-theme="light"] .mission-strip h2,
html.chief[data-theme="light"] .mission-strip #missionPreview,
html.chief[data-theme="light"] .project-map-intro p { color: var(--text-light); }
html.chief[data-theme="light"] .project-map-meta span,
html.chief[data-theme="light"] .project-map-stat span { color: rgba(38, 33, 24, 0.68); }
html.chief[data-theme="light"] .project-map-stat {
  background: #9a7737;
  color: #fff;
}
html.chief[data-theme="light"] .project-map-stat strong,
html.chief[data-theme="light"] .project-map-stat span { color: #fff; }
html.chief[data-theme="light"] .mission-strip .eyebrow { color: #2f6b28; }

/* ---- Member app shell (dna-theme.css) ---- */
html[data-theme="light"] .app-top {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(138, 109, 59, 0.22);
}
/* ---- Assessment/tool pages use a THIRD header (.platform-header, dna-skin.css),
   hard-coded to rgba(17,17,24,.72). In light mode its dark ink landed on a dark
   bar — illegible. Give it paper so the nav reads. ---- */
html[data-theme="light"] .platform-header {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(138, 109, 59, 0.22);
}
html[data-theme="light"] body {
  background:
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, var(--bg) 55%, var(--bg-deep) 100%);
  background-attachment: fixed;
}
/* dna-home hero subtitle carries an inline color:#fff */
html[data-theme="light"] #heroSub { color: var(--c-cream-bright) !important; }

/* ---- Tool banners (Assessment etc.) sit on a DARK photo scrim in both themes,
   so their text must stay light. Without this the h1 goes dark-on-dark. ---- */
html[data-theme="light"] .tool-banner h1,
html[data-theme="light"] .tool-banner-copy h1 { color: #ffffff; }
html[data-theme="light"] .tool-banner .eyebrow { color: #d9be86; }
html[data-theme="light"] .tool-banner p:not(.eyebrow) { color: rgba(255, 255, 255, 0.85); }

/* ---- Site footer becomes paper in light mode, so its white text must go dark ---- */
html[data-theme="light"] footer strong { color: var(--c-cream-bright); }
html[data-theme="light"] footer small,
html[data-theme="light"] footer p { color: var(--c-muted); }
html[data-theme="light"] footer a { color: var(--c-copper); }
/* .tool-footer .platform-brand strong hard-codes white and outranks the rule above */
html[data-theme="light"] .tool-footer .platform-brand strong { color: var(--c-cream-bright); }
html[data-theme="light"] .tool-footer .platform-brand small { color: var(--c-muted); }

/* ---- Assessment sidebar title: it's a heading, not an accent. Gold-on-cream
   washed out badly in light mode, so give it the primary ink colour. ---- */
html[data-theme="light"] .assessment-experience .brand strong { color: var(--c-cream-bright); }

/* ---- My Pathway: the bright status green (#27ae60) reads fine on near-black but
   only ~2.9:1 on white — too weak for the encouragement notes a leader actually
   reads. Darken it for TEXT only; green fills/badges keep the brighter tone. ---- */
html[data-theme="light"] .ground-note,
html[data-theme="light"] .flag { color: #1c7a45; }
/* Avatar initials: soft gold on a cream chip was washed out. */
html[data-theme="light"] .avatar-chip { color: var(--c-copper-deep); }

/* ---- Mission Builder (self-contained .mb-* styles hard-code #fff) ---- */
html[data-theme="light"] .mb-h1,
html[data-theme="light"] .mb-title,
html[data-theme="light"] .mb-statement,
html[data-theme="light"] .mb-posture strong,
html[data-theme="light"] .mb-check strong,
html[data-theme="light"] .mb-recap-row .rt { color: var(--c-cream-bright); }
html[data-theme="light"] .mb-field {
  background: var(--c-surface); color: var(--c-cream-bright);
  border-color: var(--c-hairline-strong);
}
html[data-theme="light"] .mb-btn-ghost { background: var(--c-fill-soft); color: var(--c-cream); }
html[data-theme="light"] .mb-suggest:hover { color: var(--c-cream-bright); }

/* ---- Theme toggle button (injected into every header by dna-theme-toggle.js) ---- */
.dna-theme-toggle {
  appearance: none; cursor: pointer;
  width: 36px; height: 36px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--c-fill-soft);
  border: 1px solid var(--c-hairline-strong);
  color: var(--c-copper);
  transition: color .18s, border-color .18s, background .18s;
}
.dna-theme-toggle:hover { border-color: var(--c-copper); color: var(--c-copper-soft); }
.dna-theme-toggle svg { width: 18px; height: 18px; }
:root[data-theme="light"] .dna-theme-toggle .dna-ico-sun { display: none; }
:root:not([data-theme="light"]) .dna-theme-toggle .dna-ico-moon { display: none; }