/* ==========================================================================
   DNA dark skin — converts the legacy (light) tool pages to the DNA identity.
   Loaded LAST on stewardship-map / project-map / assessment so it wins.
   Strategy: remap the shared design tokens to dark/gold, then override the
   hardcoded light surfaces and dark-on-dark text that the remap can't catch.
   ========================================================================== */

:root {
  color-scheme: dark;
  --ink: #e8e8ee;
  --muted: #A3A9B3;          /* warm muted (was greenish) */
  --paper: #0a0a0e;          /* lighter, fresher warm base (was #0a0a0e) */
  --bg-deep: #07070a;
  --surface: #1a1a24;        /* warm lifted card (was green #1a1a24) */
  --surface-2: #22222e;      /* warm (was green #22222e) */
  --surface-3: #2a2a36;      /* warm (was green #2a2a36) */
  --line: rgba(255, 255, 255, 0.13);
  --line-bright: rgba(255, 255, 255, 0.22);
  --sage: #d4b87a;           /* evergreen */
  --sage-dark: #C8A96E;      /* evergreen: works as text AND as button bg */
  --gold: #C8A96E;           /* copper */
  --gold-soft: #d6ab80;
  --clay: #C8A96E;
  --sky: #22222e;            /* warm (was green) */
  --rose: #22222e;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.6);
  --sage-100: #22222e;
}

html, body {
  background: radial-gradient(125% 85% at 50% -10%, var(--c-surface) 0%, var(--c-bg) 55%, var(--c-bg-deep) 100%) no-repeat fixed;
  color: var(--ink);
}

/* ---- Surfaces that were hardcoded light ---- */
.panel,
.surface-card,
.stewardship-item,
.priority-card,
.daily-card,
.review-meter,
.map-stone,
.tree-leaf,
.tree-branch,
.tree-trunk-card,
.project-task,
.project-section,
.integration-card,
.map-guided,
.map-sheet,
.week-pill,
.google-card,
.explain-card,
.person-chip,
.chat-bubble,
.dump-result-card,
.suggestion-card,
.approval-card,
.proposal-card,
.guided-proposal,
.empty-state {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.map-experience .map-stone,
.map-experience .tree-leaf,
.map-experience .map-branch {
  background-color: var(--surface);
}

.map-experience .map-stone.complete,
.map-experience .tree-leaf.is-done,
.map-experience .project-task.is-done { background-color: var(--surface-2); }

/* ---- Headings + body text to cream ---- */
.map-experience h1, .map-experience h2, .map-experience h3, .map-experience h4,
h1, h2, h3, h4 { color: var(--ink); }
.workspace-intro, .map-instruction, p { color: var(--muted); }
.eyebrow { color: var(--gold); }

/* ---- Form controls ---- */
input, textarea, select {
  background-color: var(--bg-deep);
  color: var(--ink);
  border-color: var(--line-bright);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.16);
  outline: none;
}

/* ---- Buttons ---- */
.primary-button, .map-action-schedule, .dump-dictate-button.recording {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--c-copper-ink);
  border-color: transparent;
}
.secondary-button, .text-button, .icon-button, .map-add-link, .project-view-btn,
.map-action-explain, .map-action-google, .map-action-delete {
  background-color: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-bright);
}
.secondary-button:hover, .text-button:hover, .map-add-link:hover { border-color: var(--gold); color: var(--gold-soft); }
.project-view-btn.is-active { background: var(--surface-3); color: var(--gold); }
.map-action-delete { background: transparent !important; color: var(--muted) !important; border-color: transparent !important; }

/* ---- Badges / pills keep meaning but on dark ---- */
.badge--neutral, .pill { background: var(--surface-3); color: var(--muted); }
.badge--unassigned { color: var(--muted); border-color: var(--line-bright); }

/* ---- Platform header / nav / footer rebrand ---- */
.platform-header {
  background: rgba(17, 17, 24, 0.72);
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
/* The header is sticky, so scrollIntoView({block:"start"}) parks section titles
   underneath it. Reserve its height on every scroll so headings land in view.
   The assessment stacks a SECOND sticky bar (.journey-progress, pinned at 83px)
   below the header, so those pages must reserve the whole stack (~135px). */
html { scroll-padding-top: 104px; }
html:has(.journey-progress) { scroll-padding-top: 150px; }
@media (max-width: 720px) {
  html { scroll-padding-top: 88px; }
  html:has(.journey-progress) { scroll-padding-top: 128px; }
}
.platform-brand strong { color: var(--ink); }
.platform-brand small { color: var(--muted); }
.platform-mark {
  background: radial-gradient(circle at 35% 30%, #22222e, #07070a);
  border: 1px solid var(--gold);
  position: relative;
}
.platform-mark::after {
  content: "D";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--gold); font-family: var(--tool-serif, "Cormorant Garamond", serif);
  font-weight: 700; font-size: 1.15rem;
}
.platform-nav a { color: var(--muted); }
.platform-nav a:hover, .platform-nav a.active { color: var(--gold); }
.platform-language { color: var(--muted); }
.platform-language .selected { color: var(--ink); }
.platform-home { color: var(--ink); border-color: var(--line-bright); }
.tool-footer { background: var(--bg-deep); border-top: 1px solid var(--line); color: var(--muted); }

/* ---- Banner: keep imagery, deepen overlay so cream text reads ---- */
.tool-banner { background-color: var(--bg-deep); position: relative; overflow: hidden; }
.tool-banner::after {
  content: ""; position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(10,10,14,0.55) 0%, rgba(10,10,14,0.25) 58%, rgba(10,10,14,0.04) 100%);
}
.tool-banner-copy { position: relative; z-index: 1; }
.tool-banner h1 { color: var(--ink); }
.tool-banner p { color: var(--c-muted); }

/* ---- Mission strip / dark bands already green — keep, ensure text light ---- */
.mission-strip { background: var(--surface); border: 1px solid var(--line); }
.mission-strip h2, .mission-strip p, .stewardship-map-workspace { color: var(--ink); }

/* ---- Dialogs ---- */
dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

/* ---- Misc hardcoded light fills ---- */
.map-stone-notes, .integration-note, .dictation-panel { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.progress { background: var(--surface-3); }

/* ---- Assessment page: its stylesheet had light blocks the remap couldn't reach ---- */
.assessment-experience h1, .assessment-experience h2, .assessment-experience h3 { color: var(--ink); }
.assessment-experience .journey-progress { background: var(--surface); border-color: var(--line); }
.assessment-experience .progress-track, .assessment-experience .tenet-track { background: var(--surface-3); }
.assessment-experience .pace-note, .assessment-experience .timer-line { background: var(--surface-2); }
.assessment-experience .mutation-block { background: var(--surface-2); }
.assessment-experience .process-step { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.assessment-experience .process-step.active { background: var(--surface-3); color: var(--ink); border-color: var(--gold); }
.assessment-experience #sectionNav button.complete { background: var(--surface-3); }

/* ---- Lighter & fresher: brighten the dim section headings / eyebrows ---- */
.topbar h1,
.app-shell main h1,
.section-heading h2,
.map-guided-head h3 { color: var(--c-cream-bright); }

.topbar .eyebrow { color: var(--c-copper); }
.workspace-intro { color: var(--c-muted); }