/* Mist & Dusk — shared chromatic system, 2026-10-07.
   Legacy green/sage token names retained for compatibility; no layout changes. */
:root {
  --bg: #f2f1f6;
  --bg-elevated: rgba(251, 250, 253, .94);
  --surface: #fbfafd;
  --surface-2: #e8e8f1;
  --surface-3: #d9dce9;
  --text: #30374d;
  --text-soft: #5d6578;
  --ink: var(--text);
  --muted: var(--text-soft);
  --line: #d5d8e3;
  --line-strong: #b9bfd1;
  --green: #65739b;
  --green-strong: #4d5d87;
  --green-light: #dfe3f0;
  --sage: #e8e8f1;
  --sage-deep: #d9dce9;
  --accent: #53638c;
  --on-accent: #ffffff;
  --gold: #897049;
  --danger: #a44354;
  --shadow: 0 18px 60px rgba(57, 63, 96, .10);
  --shadow-soft: 0 8px 28px rgba(57, 63, 96, .07);
  --scene-top: #e6e8f3;
  --scene-mid: #d4dbea;
  --scene-bottom: #bac7dd;
  --scene-glow: rgba(251, 240, 227, .55);
  --scene-frame: #99a8c2;
}
:root[data-theme="dark"] {
  --bg: #252a3b;
  --bg-elevated: rgba(45, 51, 70, .96);
  --surface: #30374b;
  --surface-2: #394158;
  --surface-3: #444e68;
  --text: #f0edf5;
  --text-soft: #c3c9dc;
  --ink: var(--text);
  --muted: var(--text-soft);
  --line: #505b77;
  --line-strong: #74819f;
  --green: #b7c4e6;
  --green-strong: #d0d8f0;
  --green-light: #404d6c;
  --sage: #394158;
  --sage-deep: #495672;
  --accent: #bcc8e8;
  --on-accent: #252d43;
  --gold: #d4b991;
  --danger: #f0a6b3;
  --shadow: 0 18px 60px rgba(13, 17, 32, .22);
  --shadow-soft: 0 8px 28px rgba(13, 17, 32, .18);
  --scene-top: #465170;
  --scene-mid: #394661;
  --scene-bottom: #303b54;
  --scene-glow: rgba(213, 211, 235, .16);
  --scene-frame: #899bbd;
}
/* Community: neutralize the former green ambient light and memorial surfaces. */
.ambient-one { background: rgba(158, 172, 217, .16); }
.ambient-two { background: rgba(181, 160, 192, .11); }
html[data-theme="dark"] .button-primary { color: #252d43; }
.memory-carousel { background: var(--surface-2); }
.memory-stage, html[data-theme="dark"] .memory-stage,
.photo-editor-preview, html[data-theme="dark"] .photo-editor-preview {
  background: linear-gradient(180deg, var(--scene-top), var(--scene-mid) 56%, var(--scene-bottom));
}
.memory-stage::before { background: radial-gradient(circle at 50% 18%, var(--scene-glow), transparent 36%); }
.memory-stage::after { color: var(--text-soft); opacity: .35; }
.stage-glow { background: var(--scene-glow); }
.portrait-frame { background: var(--surface-3); box-shadow: 0 22px 50px rgba(36, 43, 69, .20); }
.plaque-garden .portrait-frame { border-color: var(--scene-frame); }
.plaque-stone .portrait-frame { border-color: #969bad; }
.plaque-copy, html[data-theme="dark"] .plaque-copy {
  background: var(--bg-elevated); color: var(--text); border-color: var(--line);
  box-shadow: 0 16px 34px rgba(36, 43, 69, .14);
}
.photo-slide { background: #252a3b; }
.preview-photo::after { background: linear-gradient(transparent, rgba(28, 33, 51, .45)); }
.preview-remembrance, .carousel-button { background: rgba(30, 37, 58, .72); }
.plaque-mini { background: var(--surface-3); }
.plaque-mini i { background: var(--scene-frame); }
.plaque-mini.plaque-stone { background: #aeb3c5; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(140, 157, 209, .20); }
.toast { background: #3e4a6b; }
.report-dialog::backdrop, dialog::backdrop { background: rgba(20, 24, 40, .65); }
/* Landing: a misty blue landscape and warm moonlight, not a green garden. */
.hero-art { background: linear-gradient(155deg, var(--scene-top), var(--scene-mid)); }
.art-sun { background: #f1e3d3; box-shadow: 0 0 80px 30px rgba(241, 227, 211, .20); }
.hill-back { background: var(--scene-bottom); }
.hill-front { background: #a5b4d0; }
.art-path { background: #e1dce9; }
.branch { fill: #8796b4; stroke: #7183a6; }
.hero-memorial { background: var(--surface); color: var(--text); box-shadow: 8px 24px 40px rgba(53, 62, 92, .18); }
.memorial-arch { border-color: var(--sage-deep); }
.hero-memorial p, .floating-note small, .art-caption { color: var(--text-soft); }
.memorial-flower, .floating-note>span { color: var(--accent); }
.floating-note { background: var(--surface); color: var(--text); border-color: var(--line); }
.flying-dove { fill: #fff9f2; }
.candle-base { background: #929bb6; }
html[data-theme="dark"] .art-sun { background: #c2bed8; box-shadow: 0 0 80px 30px rgba(186, 185, 220, .10); }
html[data-theme="dark"] .hill-front { background: #33405c; }
html[data-theme="dark"] .art-path { background: #616582; }
html[data-theme="dark"] .branch { fill: #7887ad; stroke: #667aa0; }
html[data-theme="dark"] .art-caption { color: #d7dbee; }
.brand img { filter: grayscale(.95) sepia(.12) hue-rotate(170deg); }