/* MemoryMantle — Site-wide theme tokens (light/dark + accent)
 *
 * Mounted on every page that loads /js/site-theme.js. Two attributes drive
 * everything:
 *   <html data-color-scheme="light|dark">
 *   <html data-accent="gold|sea|sage|plum|stone">  (default = gold)
 *
 * Memorial view pages have their own per-memorial themes (--accent etc. in
 * memorial-themes.css). Those are loaded LATER and so win for memorial
 * chrome — the site-wide accent acts as a fallback for the rest of the site.
 *
 * Specificity note: dark-mode rules use `html[data-color-scheme="dark"] X`
 * (0,1,2) which beats inline page `<style>` rules (typically 0,0,1) without
 * !important. We only fall back to !important where a rule must override a
 * pre-existing !important on the page. */

:root {
  --mm-bg: #faf8f5;
  --mm-surface: #ffffff;
  --mm-surface-2: #f6f4ef;
  --mm-text: #2a2a2a;
  --mm-text-muted: #6b6b6b;
  --mm-border: #e8e4df;
  --mm-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Accent — overridden by [data-accent] below. Default is the brand gold. */
  --mm-accent: #d4a853;
  --mm-accent-dark: #b8923e;
  --mm-accent-soft: rgba(212, 168, 83, 0.18);
}

/* ---------- Accent palette ----------
 * Picks from the memorial palettes so site + memorial pages feel related. */
html[data-accent="gold"]   { --mm-accent: #d4a853; --mm-accent-dark: #b8923e; --mm-accent-soft: rgba(212,168,83,0.18); }
html[data-accent="sea"]    { --mm-accent: #5a8aa8; --mm-accent-dark: #3d6985; --mm-accent-soft: rgba(90,138,168,0.18); }
html[data-accent="sage"]   { --mm-accent: #7a9362; --mm-accent-dark: #4f6d3e; --mm-accent-soft: rgba(122,147,98,0.18); }
html[data-accent="plum"]   { --mm-accent: #8e7bc4; --mm-accent-dark: #5e4f8e; --mm-accent-soft: rgba(142,123,196,0.18); }
html[data-accent="stone"]  { --mm-accent: #a08864; --mm-accent-dark: #6e5b3f; --mm-accent-soft: rgba(160,136,100,0.18); }

/* ---------- Site-wide accent hooks ----------
 * Hook the picker's --mm-accent into the highest-visibility chrome
 * surfaces so users see a clear visual change the moment they click an
 * accent dot. Deliberately conservative: brand identity surfaces (the
 * gold leaf in .logo i, the dove + feather icons in marketing copy, the
 * Premium tier badge) stay at the hardcoded brand gold. The accent
 * affects FEEDBACK surfaces — focus, hover, active state — and a few
 * common CTA classes.
 *
 * Inline styles on individual pages (e.g. style="background:#d4a853")
 * still win by specificity. The :where() wrapper here keeps these
 * rules at specificity (0,0,0) so per-page inline accents are never
 * fought over; a page can opt out by inlining its own colour.
 *
 * To opt a NEW chrome element into the accent: prefer using
 * var(--mm-accent) directly in the page CSS over adding to this list. */

/* Logo icon — most visible single accent surface. Brand identity but
 * worth re-tinting so users see the picker working on the very first
 * pixel they look at. Use :where() so an inline style still wins. */
:where(.logo i) {
  color: var(--mm-accent);
}

/* Active nav state (the "current page" indicator across the site) */
:where(.nav-links a.active),
:where(.mobile-menu a.active) {
  color: var(--mm-accent);
}

/* Hover state on top-level nav links — gives the picker a hover-test */
:where(.nav-links a:hover),
:where(.mobile-menu a:hover) {
  color: var(--mm-accent);
}

/* Form focus rings — high-frequency interaction surface, consistent
 * across the site, almost never overridden inline. */
:where(.form-input:focus),
:where(.form-textarea:focus),
:where(.form-select:focus),
:where(input:focus-visible),
:where(textarea:focus-visible),
:where(select:focus-visible) {
  border-color: var(--mm-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--mm-accent-soft);
}

/* Primary CTA button classes used across many pages (account-settings,
 * create flows, etc.) — accent-driven background + hover. Pages that
 * inline a gradient on top still win. */
:where(.btn-primary),
:where(button.btn-primary),
:where(.cta-button) {
  background-color: var(--mm-accent);
  border-color: var(--mm-accent);
}
:where(.btn-primary:hover),
:where(button.btn-primary:hover),
:where(.cta-button:hover) {
  background-color: var(--mm-accent-dark);
  border-color: var(--mm-accent-dark);
}

/* Generic accent-coloured text links / hints. */
:where(.accent-link),
:where(.text-accent) {
  color: var(--mm-accent);
}

/* ---------- Dark mode ----------
 * Override the high-traffic chrome surfaces. Page-specific tuning will
 * still be needed for some inline-styled blocks; this covers >80% of
 * what users see (body, headers, cards, modals, footers, inputs). */

html[data-color-scheme="dark"] {
  color-scheme: dark;
  --mm-bg: #0f1115;
  --mm-surface: #1a1d24;
  --mm-surface-2: #232732;
  --mm-text: #e8e6e1;
  --mm-text-muted: #a4a8b3;
  --mm-border: #2a2f38;
  --mm-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

html[data-color-scheme="dark"] body {
  background-color: var(--mm-bg);
  color: var(--mm-text);
}

/* Common header / footer chrome */
html[data-color-scheme="dark"] .header,
html[data-color-scheme="dark"] .footer,
html[data-color-scheme="dark"] nav,
html[data-color-scheme="dark"] .nav {
  background-color: var(--mm-surface);
  border-color: var(--mm-border);
  color: var(--mm-text);
}
html[data-color-scheme="dark"] .nav-links a,
html[data-color-scheme="dark"] .footer a,
html[data-color-scheme="dark"] .logo { color: var(--mm-text); }

/* Cards / panels — class names used across the codebase */
html[data-color-scheme="dark"] .card,
html[data-color-scheme="dark"] .content-section,
html[data-color-scheme="dark"] .feature-card,
html[data-color-scheme="dark"] .pricing-card,
html[data-color-scheme="dark"] .panel,
html[data-color-scheme="dark"] .section-card,
html[data-color-scheme="dark"] .info-card,
html[data-color-scheme="dark"] .modal-content,
html[data-color-scheme="dark"] .modal-body,
html[data-color-scheme="dark"] .dashboard-card {
  background: var(--mm-surface);
  color: var(--mm-text);
  border-color: var(--mm-border);
  box-shadow: var(--mm-shadow);
}

/* Form inputs */
html[data-color-scheme="dark"] input[type="text"],
html[data-color-scheme="dark"] input[type="email"],
html[data-color-scheme="dark"] input[type="password"],
html[data-color-scheme="dark"] input[type="search"],
html[data-color-scheme="dark"] input[type="tel"],
html[data-color-scheme="dark"] input[type="url"],
html[data-color-scheme="dark"] input[type="date"],
html[data-color-scheme="dark"] input[type="number"],
html[data-color-scheme="dark"] textarea,
html[data-color-scheme="dark"] select {
  background-color: var(--mm-surface-2);
  color: var(--mm-text);
  border-color: var(--mm-border);
}
html[data-color-scheme="dark"] input::placeholder,
html[data-color-scheme="dark"] textarea::placeholder { color: var(--mm-text-muted); }

/* Modal scrim */
html[data-color-scheme="dark"] .modal-overlay,
html[data-color-scheme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.65);
}

/* Reduce hardcoded dark gradients ("Donate" / primary CTA) so they
   don't look pitch-black on dark surfaces. The current site uses a
   #2a2a2a → #363636 gradient which still works but blends into the
   background; lift it slightly. */
html[data-color-scheme="dark"] .nav-login-btn,
html[data-color-scheme="dark"] .donate-btn,
html[data-color-scheme="dark"] .primary-btn {
  background: linear-gradient(135deg, #3a3f4a 0%, #4a505d 100%);
  color: #fff;
}

/* ---------- Header toggle widget ----------
 * Lives next to #mm-a11y-controls so users find it where the existing
 * A−/A+ controls already sit. */
#mm-theme-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
}
@media (max-width: 768px) {
  #mm-theme-controls { display: none; }
}

.mm-theme-btn {
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555;
  cursor: pointer;
  font-size: 14px !important;
  line-height: 1;
  padding: 3px 7px;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
  font-family: inherit;
}
.mm-theme-btn:hover { border-color: var(--mm-accent); color: var(--mm-text); }

html[data-color-scheme="dark"] .mm-theme-btn {
  border-color: #3a3f4a;
  color: #c8ccd5;
  background-color: transparent;
}
html[data-color-scheme="dark"] .mm-theme-btn:hover {
  border-color: var(--mm-accent);
  color: #fff;
}

.mm-accent-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background-clip: content-box;
}
.mm-accent-dot--active { border-color: var(--mm-text); }
html[data-color-scheme="dark"] .mm-accent-dot--active { border-color: #fff; }

.mm-accent-dot[data-accent="gold"]  { background-color: #d4a853; }
.mm-accent-dot[data-accent="sea"]   { background-color: #5a8aa8; }
.mm-accent-dot[data-accent="sage"]  { background-color: #7a9362; }
.mm-accent-dot[data-accent="plum"]  { background-color: #8e7bc4; }
.mm-accent-dot[data-accent="stone"] { background-color: #a08864; }

/* ---------- Mobile theme controls ----------
 * Injected into #mobile-menu by site-theme.js. The mobile menu lives in
 * the hamburger drawer, which already shows up only under the mobile
 * breakpoint, so we don't need a media query — the controls appear
 * exactly when the menu does. */
.mm-theme-controls--mobile {
  margin-top: 12px;
  padding: 14px 4px 4px;
  border-top: 1px solid var(--mm-border, #e8e4df);
}
.mm-theme-controls__heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mm-text-muted, #6b6b6b);
  margin-bottom: 10px;
}
.mm-theme-controls__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.mm-theme-controls__label {
  font-size: 14px;
  color: var(--mm-text, #2a2a2a);
}
.mm-theme-controls__dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Bigger touch targets inside the mobile menu — the desktop dots are 14px,
   too small for thumbs. */
.mm-theme-controls--mobile .mm-accent-dot {
  width: 22px;
  height: 22px;
  border-width: 3px;
}
.mm-theme-controls--mobile .mm-theme-btn {
  font-size: 18px !important;
  padding: 6px 12px;
}
