/* =====================================================================
   theme.css — legacy variable bridge for Everlasting Memory.

   The canonical design tokens now live in globals.css using the
   shadcn/ui HSL variable convention (--background, --foreground,
   --primary, --card, --muted, --border, --ring, --radius, etc.).
   Tailwind Play CDN reads them via tailwind.config.js so utility
   classes like `bg-primary` resolve correctly.

   This file exists to bridge those HSL tokens back to the legacy
   variable names the existing hand-written CSS across the pages
   still references (--text-rgb, --gold-2, --cream, etc.), and to
   restyle the class-based selectors (.card, .sidebar, .btn-gold,
   .pill, .quick-action-fab, .tree-node, ...) so the pre-shadcn JSX
   still visually matches the shadcn primitives.

   Load ORDER on every page:
     1. Tailwind Play CDN
     2. tailwind.config.js
     3. globals.css     (HSL tokens + base layer)
     4. theme.css       (this file — legacy bridge + class overrides)
     5. shadcn-ui.js    (window.Shadcn.*)

   Fonts are imported by globals.css so we don't double-request them.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Legacy variable bridge. The existing hand-written CSS across the
   pages references these variable names directly (--text-rgb,
   --gold-2, --cream, etc.). We map each one to the canonical shadcn
   HSL token so both systems paint the same colour and updating
   globals.css re-skins everything in one place.
   --------------------------------------------------------------------- */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  /* Legacy RGB triples used inside rgba(var(--foo-rgb), 0.n) rules */
  --text-rgb: 15, 16, 20;
  --accent-rgb: 184, 134, 68;
  --accent2-rgb: 200, 149, 71;
  --muted-rgb: 107, 107, 115;

  /* Named shorthand */
  --cream: #0F1014;
  --cream-dim: #4B4B52;
  --cream-faint: #8A8A92;
  --ink: 15 16 20;
  --gold-2: #B88644;
  --gold-3: #9E6C2E;
  --gold-4: #D4A055;
  --gold-faint: rgba(184, 134, 68, 0.14);

  /* Neutral surfaces — these mirror hsl(var(--card)), hsl(var(--muted)) */
  --surface:   hsl(var(--card));
  --surface-2: #FAFAFA;
  --surface-3: hsl(var(--muted));
  --bg:        hsl(var(--background));
  --line:        hsl(var(--border));
  --line-strong: rgba(15, 16, 20, 0.14);
  --rose: hsl(var(--destructive));

  /* Sidebar bridge */
  --sidebar-bg:        hsl(var(--sidebar-background));
  --sidebar-bg-alt:    hsl(var(--sidebar-accent));
  --sidebar-fg:        hsl(var(--sidebar-foreground));
  --sidebar-fg-dim:    #A7A9B0;
  --sidebar-line:      hsl(var(--sidebar-border));
  --sidebar-active-fg: hsl(var(--sidebar-primary-foreground));
  --sidebar-grad:      hsl(var(--sidebar-background));
}

/* ---------------------------------------------------------------------
   Global typography + white background. The `background` override on
   both html and body kills every page's radial-gradient body art (a
   cream/gold wash that made the old theme feel warm and dark). Now
   every surface starts from a clean white canvas.
   --------------------------------------------------------------------- */
html, body {
  background: #FFFFFF !important;
  color: #0F1014 !important;
  font-family: 'Albert Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-theme="light"] body,
html[data-theme="dark"] body {
  background: #FFFFFF !important;
}
/* Kill any body-level radial gradients / ornament */
body {
  background-image: none !important;
}

/* Serif headings across the app */
h1, h2, h3, h4, h5, h6,
.hero h1,
.brand .b1,
.card-head h2,
.card h2,
.card h3,
.section-head h1,
.section-head h2,
.feed-card-name,
.profile-header-text h1,
.lv-headline,
.donate-title,
.pmem-welcome-body,
.pmem-tl-label,
.pmem-value-lbl,
.pmem-num,
.lit-message,
.dir-name, .dir-name em,
.charity-name,
.donate-title em,
.wall-name, .wall-hero h2,
.epitaph, .dir-epitaph,
.pc-head, .pc-head em {
  font-family: 'Platypi', ui-serif, Georgia, Cambria, serif !important;
  letter-spacing: -0.01em;
  color: #0F1014 !important;
}
h1 { font-weight: 500 !important; }
h2 { font-weight: 500 !important; }
h3 { font-weight: 500 !important; }
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.hero h1 em, .head h1 em, .lv-headline em,
.pc-head em, .donate-title em, .dir-name em {
  color: #B88644 !important;
  font-style: italic;
  font-family: 'Platypi', serif !important;
}

/* Eyebrows, small caps, buttons keep the sans-serif with tight tracking */
.eyebrow, .legacy-eyebrow, .lv-eyebrow, .brand .b2,
.pill, .btn, button, label, input, textarea, select,
.card-head .sub, .sub, .rel, .rel > *,
.dir-eyebrow, .charity-tag {
  font-family: 'Albert Sans', system-ui, sans-serif !important;
}

/* Italic emphasis used inside headings (e.g. "Create an account.")
   picks up Platypi italic naturally with the presets above. */

/* ---------------------------------------------------------------------
   Sidebar — the near-black rail with light text and an amber active pill.
   --------------------------------------------------------------------- */
.sidebar {
  background: #0E0F12 !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  color: #E8E8EA !important;
}
.sidebar-brand,
.sidebar-brand * {
  color: #EDEDF0 !important;
}
.sidebar-brand .b2 {
  color: rgba(255,255,255,0.55) !important;
}
.sidebar-rule {
  background: linear-gradient(90deg, #78581C 0%, #ffffff 85%, #78581C 100%) !important;
  border-color: transparent !important;
}
.sidebar-nav .nav-btn,
.sidebar .nav-btn {
  color: #C8C9CF !important;
  background: transparent !important;
  border: none !important;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.sidebar-nav .nav-btn:hover,
.sidebar .nav-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
}
/* Sidebar rail — flat charcoal. */
.sidebar { background: #1b1b1b !important; }

.sidebar-nav .nav-btn.active,
.sidebar .nav-btn.active {
  /* Flat gold at 60% opacity, no stroke (per brand spec). */
  background: rgba(209, 161, 80, 0.6) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(184, 134, 68, 0.30);
}
.sidebar .nav-btn.active .nav-icon,
.sidebar-nav .nav-btn.active .nav-icon {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
.sidebar-foot,
.sidebar-foot * {
  color: #A7A9B0 !important;
}
.sidebar-foot .avatar {
  background: linear-gradient(135deg, #C89547 0%, #9E6C2E 100%) !important;
  color: #1B1206 !important;
}

/* ---------------------------------------------------------------------
   Main content area — white background, dark text.
   --------------------------------------------------------------------- */
.main {
  background: #FFFFFF !important;
  color: #0F1014 !important;
}

/* ---------------------------------------------------------------------
   Cards — flat white with a subtle grey border and a whisper of shadow.
   Handles the four card variants the app uses: .card, .glass-card,
   .card.warm, .dir-card.
   --------------------------------------------------------------------- */
.card, .glass-card,
.card.warm,
.dir-card,
.profile-hero,
.recipient-card,
.person-card,
.vault-row,
.vault-tile,
.trigger-card,
.timeline-row,
.saved-content-tile,
.welcome-video-cta,
.legacy-video-hero,
.legacy-partner {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 16, 20, 0.08) !important;
  box-shadow: 0 1px 2px rgba(15, 16, 20, 0.04) !important;
  color: #0F1014 !important;
}
.card.warm { background: #FFFFFF !important; }
.legacy-video-hero.is-empty,
.legacy-video-hero.is-filled {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 16, 20, 0.08) !important;
}
.legacy-video-hero .lv-eyebrow { color: #B88644 !important; }
.legacy-video-hero .lv-headline { color: #0F1014 !important; }
.legacy-video-hero .lv-headline em { color: #B88644 !important; }
.legacy-video-hero .lv-sub,
.legacy-video-hero .lv-meta-text,
.legacy-video-hero .lv-secondary-note { color: #4B4B52 !important; }

.card-head h2, .card h2, .glass-card h2 { color: #0F1014 !important; }
.card-head .sub, .sub { color: #6B6B6B !important; }
.card-head .right { color: #6B6B6B !important; }

/* Section head — big page title */
.section-head h1,
.section-head h2 { color: #0F1014 !important; }
.section-head .lede,
.lede { color: #4B4B52 !important; }
.eyebrow, .legacy-eyebrow, .lv-eyebrow, .dir-eyebrow {
  color: #B88644 !important;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Facts, meta, dim text */
.meta, .profile-header-text .meta,
.feed-card-dates, .dates,
.check-in-sub {
  color: #6B6B6B !important;
}

/* ---------------------------------------------------------------------
   Buttons.
   --------------------------------------------------------------------- */
.btn {
  font-family: 'Albert Sans', sans-serif !important;
  background: #FFFFFF !important;
  color: #0F1014 !important;
  border: 1px solid rgba(15,16,20,0.14) !important;
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.btn:hover {
  background: #F5F5F6 !important;
  border-color: rgba(15,16,20,0.24) !important;
}
.btn.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}
.btn-gold, .btn.btn-gold {
  /* Flat brand gold, no gradient, no stroke — consistent across every CTA. */
  background: #D1A150 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(184,134,68,0.28);
}
.btn-gold:hover, .btn.btn-gold:hover {
  filter: brightness(1.05);
  background: #D1A150 !important;
}
.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(15,16,20,0.14) !important;
  color: #4B4B52 !important;
}
.btn-danger {
  background: transparent !important;
  border: 1px solid rgba(193, 86, 86, 0.4) !important;
  color: #C15656 !important;
}

.meta-pill {
  background: transparent !important;
  border: 1px solid rgba(15,16,20,0.14) !important;
  color: #4B4B52 !important;
  font-family: 'Albert Sans', sans-serif !important;
}
.meta-pill:hover { color: #0F1014 !important; border-color: rgba(15,16,20,0.30) !important; }

/* ---------------------------------------------------------------------
   Pills / badges.
   --------------------------------------------------------------------- */
.pill {
  background: transparent !important;
  border: 1px solid rgba(15,16,20,0.14) !important;
  color: #4B4B52 !important;
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.pill.neutral {
  background: #FAFAFA !important;
  border-color: rgba(15,16,20,0.10) !important;
  color: #6B6B6B !important;
}
.pill.danger {
  background: rgba(193,86,86,0.08) !important;
  border-color: rgba(193,86,86,0.40) !important;
  color: #A24040 !important;
}

/* ---------------------------------------------------------------------
   Inputs.
   --------------------------------------------------------------------- */
input, textarea, select {
  background: #FFFFFF !important;
  color: #0F1014 !important;
  border: 1px solid rgba(15,16,20,0.14) !important;
  border-radius: 8px;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px;
  padding: 10px 12px;
}
input::placeholder, textarea::placeholder {
  color: #9B9B9F !important;
  font-family: 'Albert Sans', sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: #B88644 !important;
  box-shadow: 0 0 0 3px rgba(184,134,68,0.15) !important;
}
label {
  color: #4B4B52 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Albert Sans', sans-serif !important;
}

/* ---------------------------------------------------------------------
   Modal.
   --------------------------------------------------------------------- */
.modal-backdrop {
  background: rgba(15,16,20,0.45) !important;
  backdrop-filter: blur(4px);
}
.modal {
  background: #FFFFFF !important;
  color: #0F1014 !important;
  border: 1px solid rgba(15,16,20,0.10) !important;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15,16,20,0.25);
}
.modal h2 { color: #0F1014 !important; }

/* ---------------------------------------------------------------------
   FAB and small round action buttons.
   --------------------------------------------------------------------- */
.quick-action-fab {
  background: linear-gradient(135deg, #C89547 0%, #9E6C2E 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(184,134,68,0.55) !important;
  box-shadow: 0 8px 24px rgba(184,134,68,0.35), 0 0 0 6px rgba(184,134,68,0.10) !important;
}
.quick-action-fab:hover {
  filter: brightness(1.05);
}

/* ---------------------------------------------------------------------
   Feed cards (Dashboard) and directory cards keep white surfaces.
   --------------------------------------------------------------------- */
.feed-card,
.dir-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(15,16,20,0.08) !important;
}
.feed-card-portrait,
.dir-portrait {
  background: #F4F4F5 !important;
  color: #B88644 !important;
}
.feed-card-name, .dir-name { color: #0F1014 !important; }
.feed-card-epitaph, .dir-epitaph {
  color: #6B6B6B !important;
  font-family: 'Platypi', serif !important;
  font-style: italic;
}
.feed-card-charity strong { color: #B88644 !important; }
.feed-card-stats { border-top-color: rgba(15,16,20,0.08) !important; color: #6B6B6B !important; }
.feed-card-stats strong { color: #B88644 !important; }

/* Google-style feed search bar */
.feed-search {
  background: #FFFFFF !important;
  border-color: rgba(15,16,20,0.14) !important;
  box-shadow: 0 1px 3px rgba(15,16,20,0.04);
}
.feed-search:focus-within {
  border-color: #B88644 !important;
  box-shadow: 0 0 0 3px rgba(184,134,68,0.15) !important;
}
.feed-search input {
  color: #0F1014 !important;
  font-family: 'Albert Sans', sans-serif !important;
}
.feed-search input::placeholder { color: #9B9B9F !important; }
.feed-filter-btn {
  background: #FFFFFF !important;
  border: 1px solid rgba(15,16,20,0.12) !important;
  color: #4B4B52 !important;
  font-family: 'Albert Sans', sans-serif !important;
}
.feed-filter-btn.active {
  background: linear-gradient(135deg, rgba(184,134,68,0.14), rgba(184,134,68,0.06)) !important;
  border-color: #B88644 !important;
  color: #0F1014 !important;
}

/* ---------------------------------------------------------------------
   Family Tree — flat white tree nodes.
   --------------------------------------------------------------------- */
.tree-canvas { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.tree-band-label { color: #B88644 !important; }
.tree-node {
  background: #FFFFFF !important;
  border: 1px solid rgba(15,16,20,0.08) !important;
  color: #0F1014 !important;
}
.tree-node .ava {
  background: #F4F4F5 !important;
  color: #B88644 !important;
  border: 1px solid rgba(184,134,68,0.20) !important;
}
/* EM-012 — no photo yet: brand flame mark on a dark disc instead of initials. */
.tree-node .ava.ava-mark {
  background: #101010 !important;
  border: 1px solid rgba(209,161,80,0.45) !important;
}
.tree-node .ava .ava-flame {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
}
.tree-node.self {
  /* EM-029 — the logged-in user is the tree's root node: a solid gold
     #C9A96E border (2px) so they're immediately identifiable as the centre. */
  border: 2px solid #C9A96E !important;
  background: #FFFDF6 !important;
}
.tree-node.self .ava {
  background: linear-gradient(135deg, #C89547, #9E6C2E) !important;
  color: #FFFFFF !important;
}
.tree-node.ghost {
  background: transparent !important;
  border: 1px dashed rgba(15,16,20,0.20) !important;
  color: #6B6B6B !important;
}
.tree-node.ghost .ava {
  background: transparent !important;
  border: 1px dashed rgba(15,16,20,0.20) !important;
  color: #9B9B9F !important;
}
.tree-node .name { color: #0F1014 !important; }
.tree-node .rel { color: #6B6B6B !important; }
/* EM-029 — the root node's "You" label in gold to reinforce it's the user. */
.tree-node.self .rel { color: #C9A96E !important; }

/* ---------------------------------------------------------------------
   Vault rows & tiles.
   --------------------------------------------------------------------- */
.vault-row {
  background: #FFFFFF !important;
  border: 1px solid rgba(15,16,20,0.08) !important;
}
.vault-row:hover {
  background: #FAFAFA !important;
  border-color: rgba(184,134,68,0.35) !important;
}
.vault-row .icon-circle,
.icon-circle {
  background: #F5EDE0 !important;
  color: #B88644 !important;
  border: 1px solid rgba(184,134,68,0.20) !important;
}
.vault-row-title { color: #0F1014 !important; }
.vault-row-sub { color: #6B6B6B !important; }

/* Trigger-card grid (used in scheduled-message + quick-action modals) */
.trigger-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(15,16,20,0.10) !important;
  color: #0F1014 !important;
}
.trigger-card:hover {
  border-color: rgba(184,134,68,0.45) !important;
  background: #FFFDF6 !important;
}
.trigger-card.selected {
  border-color: #B88644 !important;
  background: linear-gradient(135deg, rgba(184,134,68,0.14), rgba(184,134,68,0.06)) !important;
  box-shadow: inset 0 0 0 1px #B88644 !important;
}
.trigger-card .ti { color: #B88644 !important; }
.trigger-card .tl { color: #0F1014 !important; font-family: 'Platypi', serif !important; }
.trigger-card .ts { color: #6B6B6B !important; }

/* Soft banners */
.soft-banner {
  background: linear-gradient(180deg, rgba(184,134,68,0.08), rgba(184,134,68,0.02)) !important;
  border: 1px solid rgba(184,134,68,0.24) !important;
  color: #0F1014 !important;
}
.soft-banner .sb-icon { color: #B88644 !important; }
.soft-banner .sb-head { color: #0F1014 !important; }
.soft-banner .sb-text { color: #4B4B52 !important; }

/* Empty state cards */
.empty {
  color: #6B6B6B !important;
  border: 1px dashed rgba(15,16,20,0.14);
  border-radius: 12px;
}
.empty.card, .card .empty {
  border: 1px dashed rgba(15,16,20,0.14) !important;
  background: #FAFAFA !important;
}
.empty .headline,
.empty-headline {
  color: #0F1014 !important;
  font-family: 'Platypi', serif !important;
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   Memorial Wall specifics (used inside dashboard.html).
   --------------------------------------------------------------------- */
.wall-portrait {
  background: #F4F4F5 !important;
  border: 2px solid rgba(184,134,68,0.30) !important;
}
.wall-portrait .placeholder { color: #B88644 !important; }
.glow-ring { opacity: 0.4; }

/* ---------------------------------------------------------------------
   Charity picker (Profile).
   --------------------------------------------------------------------- */
.charity-picker-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(15,16,20,0.10) !important;
  color: #0F1014 !important;
}
.charity-picker-card:hover {
  border-color: rgba(184,134,68,0.45) !important;
  background: #FFFDF6 !important;
}
.charity-picker-card.selected {
  border-color: #B88644 !important;
  background: linear-gradient(135deg, rgba(184,134,68,0.14), rgba(184,134,68,0.06)) !important;
  box-shadow: inset 0 0 0 1px #B88644 !important;
}
.charity-picker-card .cpc-name { color: #0F1014 !important; }
.charity-picker-card .cpc-tag { color: #6B6B6B !important; }
.charity-picker-card .cpc-check {
  background: linear-gradient(135deg, #C89547 0%, #9E6C2E 100%) !important;
  color: #FFFFFF !important;
}

/* ---------------------------------------------------------------------
   Saved-content tiles (Profile page shortcuts to Vault sub-views).
   --------------------------------------------------------------------- */
.saved-content-tile {
  background: #FFFFFF !important;
  border: 1px solid rgba(15,16,20,0.10) !important;
}
.saved-content-tile:hover {
  background: #FAFAFA !important;
  border-color: rgba(184,134,68,0.40) !important;
}
.saved-content-tile .sct-icon {
  background: #F5EDE0 !important;
  color: #B88644 !important;
  border: 1px solid rgba(184,134,68,0.20) !important;
}
.saved-content-tile .sct-label { color: #0F1014 !important; }
.saved-content-tile .sct-count { color: #B88644 !important; }
.saved-content-tile .sct-preview { color: #6B6B6B !important; }

/* ---------------------------------------------------------------------
   Auth page — the standalone sign-in surface.
   --------------------------------------------------------------------- */
.wrap { background: transparent !important; }
.head h1 { color: #0F1014 !important; font-family: 'Platypi', serif !important; }
.head h1 em { color: #B88644 !important; font-style: italic; }
/* NOTE: The old .mode-tabs / .mode-tabs button rules used to live
   here. They now conflict with the Tailwind classes auth.html sets
   directly on the segmented tabs (!bg-primary etc.), so they've
   been removed. If any other page still uses .mode-tabs it will
   fall back to the shadcn/Tailwind cascade from globals.css. */
.signed-in-card { background: #FFFFFF !important; }
.signed-in-card .who { color: #6B6B6B !important; }
.signed-in-card .ico {
  background: linear-gradient(135deg, #C89547, #9E6C2E) !important;
  color: #FFFFFF !important;
}

/* Directory + remembrance page adjustments */
.hero p { color: #4B4B52 !important; }
.dir-portrait { background: #F4F4F5 !important; color: #B88644 !important; }
.dir-eyebrow { color: #B88644 !important; }
.dir-name, .dir-charity-name { color: #0F1014 !important; }
.dir-dates { color: #6B6B6B !important; }
.dir-epitaph { color: #6B6B6B !important; font-family: 'Platypi', serif !important; }
.dir-stats { color: #6B6B6B !important; }
.dir-stats strong { color: #B88644 !important; }

/* Utility: keep the small camera badge legible */
.photo-camera-badge {
  background: #FFFFFF !important;
  color: #B88644 !important;
  border: 1px solid rgba(184,134,68,0.30) !important;
}

/* ---------------------------------------------------------------------
   High-specificity overrides. Many of the existing HTML files use
   `html[data-theme="light"] .foo` rules with !important, which beats
   a bare `.foo !important`. We re-declare the important card, tile
   and surface rules with the same specificity prefix so the new
   palette always wins. Both light and dark theme roots are covered
   so the app renders identically regardless of the stored theme
   attribute (we're effectively deprecating the dark palette here —
   the reference design is light-only).
   --------------------------------------------------------------------- */
html[data-theme="light"] .dir-card,
html[data-theme="dark"] .dir-card,
html[data-theme="light"] .card,
html[data-theme="dark"] .card,
html[data-theme="light"] .card.warm,
html[data-theme="dark"] .card.warm,
html[data-theme="light"] .glass-card,
html[data-theme="dark"] .glass-card,
html[data-theme="light"] .recipient-card,
html[data-theme="dark"] .recipient-card,
html[data-theme="light"] .person-card,
html[data-theme="dark"] .person-card,
html[data-theme="light"] .vault-row,
html[data-theme="dark"] .vault-row,
html[data-theme="light"] .vault-tile,
html[data-theme="dark"] .vault-tile,
html[data-theme="light"] .trigger-card,
html[data-theme="dark"] .trigger-card,
html[data-theme="light"] .charity-picker-card,
html[data-theme="dark"] .charity-picker-card,
html[data-theme="light"] .saved-content-tile,
html[data-theme="dark"] .saved-content-tile,
html[data-theme="light"] .legacy-video-hero,
html[data-theme="dark"] .legacy-video-hero,
html[data-theme="light"] .feed-card,
html[data-theme="dark"] .feed-card {
  background: #FFFFFF !important;
  border-color: rgba(15, 16, 20, 0.08) !important;
}

html[data-theme="light"] body,
html[data-theme="dark"] body,
[data-theme="light"] body,
[data-theme="dark"] body {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #0F1014 !important;
  /* Re-set the RGB triples on body too — landing-page.html re-declares
     them at body scope which would otherwise leak the old brown palette
     back into every descendant that reads rgba(var(--text-rgb), ...). */
  --text-rgb: 15, 16, 20 !important;
  --accent-rgb: 184, 134, 68 !important;
  --accent2-rgb: 200, 149, 71 !important;
  --muted-rgb: 107, 107, 115 !important;
}
/* Higher-specificity override for landing-page style declarations
   like `[data-theme="light"] body { --text-rgb: 42, 29, 16 }` which
   otherwise get inherited as a warm brown text colour. */
html[data-theme="light"],
html[data-theme="dark"],
[data-theme="light"],
[data-theme="dark"] {
  --text-rgb: 15, 16, 20 !important;
  --accent-rgb: 184, 134, 68 !important;
  --accent2-rgb: 200, 149, 71 !important;
  --muted-rgb: 107, 107, 115 !important;
}
html[data-theme="light"] .main,
html[data-theme="dark"] .main {
  background: #FFFFFF !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #FFFFFF !important;
  color: #0F1014 !important;
  border-color: rgba(15, 16, 20, 0.14) !important;
}
html[data-theme="light"] .feed-search,
html[data-theme="dark"] .feed-search {
  background: #FFFFFF !important;
  border-color: rgba(15, 16, 20, 0.14) !important;
}

/* Charity card default (dir grid, feed grid) — kill the warm gold tint
   from the original inline rules. */
html[data-theme="light"] .dir-card:hover,
html[data-theme="dark"] .dir-card:hover {
  background: #FAFAFA !important;
  border-color: #B88644 !important;
}

/* ---------------------------------------------------------------------
   Landing-page hard-coded overrides. landing-page.html hard-codes
   colours like `[data-theme="light"] .hero h1 { color: #2A1D10 }`
   which our lower-specificity theme.css rules can't beat. Cover
   every landing-page hero/section selector with matching specificity
   here so the copy renders in the new charcoal/amber palette.
   --------------------------------------------------------------------- */
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="light"] .hero h1, [data-theme="light"] .section-head h2,
[data-theme="light"] .why-card h3, [data-theme="light"] .step-body h3,
[data-theme="light"] .memorial-meta .name, [data-theme="light"] .charity-tile .ct-name,
[data-theme="light"] .price-card h3, [data-theme="light"] .trust-card h3,
[data-theme="light"] .faq-item h3, [data-theme="light"] .final-cta h2,
[data-theme="light"] .dir-name, [data-theme="light"] .charity-name,
[data-theme="light"] footer h4 {
  color: #0F1014 !important;
  font-family: 'Platypi', ui-serif, Georgia, Cambria, serif !important;
}
[data-theme="light"] .hero h1 em,
[data-theme="light"] .section-head h2 em,
[data-theme="light"] .final-cta h2 em,
[data-theme="light"] .dir-name em,
[data-theme="dark"] .hero h1 em,
[data-theme="dark"] .section-head h2 em {
  color: #B88644 !important;
  font-style: italic;
}
[data-theme="light"] .hero .lede,
[data-theme="light"] .section-head .lede,
[data-theme="light"] .why-card p,
[data-theme="light"] .step-body p,
[data-theme="light"] .trust-card p,
[data-theme="light"] .price-card .price-desc,
[data-theme="light"] .memorial-meta .dates,
[data-theme="light"] .memorial-meta .epitaph,
[data-theme="light"] footer p, [data-theme="light"] footer a {
  color: #4B4B52 !important;
}
[data-theme="light"] .memorial-meta .epitaph,
[data-theme="light"] .dir-epitaph {
  font-family: 'Platypi', serif !important;
  font-style: italic;
}

/* Landing-page nav CTAs and sticky headers */
[data-theme="light"] .nav,
[data-theme="light"] .site-nav,
[data-theme="light"] header nav {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,16,20,0.06) !important;
}
[data-theme="light"] .why-card, [data-theme="light"] .step-body,
[data-theme="light"] .trust-card, [data-theme="light"] .price-card,
[data-theme="light"] .faq-item, [data-theme="light"] .charity-tile,
[data-theme="light"] .memorial-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(15,16,20,0.08) !important;
}

/* ---------------------------------------------------------------------
   Section-head and section wrapper — every dashboard section uses
   this pattern. We centralise the shadcn+Tailwind treatment here so
   every screen (Profile, Family Tree, Memorial Wall, Vault, Calendar,
   Watching Over, Guardians, Legacy) renders with the same charcoal-
   on-white header pattern from the reference screenshot: title +
   subtitle on the left, action buttons on the right, generous
   spacing above and between sub-cards.
   --------------------------------------------------------------------- */
.section {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 0;
}
.section > * + * { margin-top: 20px; }
.section-head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent !important;
  margin-bottom: 8px !important;
}
.section-head > div:first-child { min-width: 0; max-width: 640px; }
.section-head h1 {
  font-family: 'Platypi', ui-serif, Georgia, serif !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: hsl(var(--foreground)) !important;
  margin: 8px 0 0 !important;
}
.section-head h1 em {
  color: hsl(var(--primary)) !important;
  font-style: italic;
}
.section-head h2 {
  font-family: 'Platypi', ui-serif, Georgia, serif !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
}
.section-head .eyebrow,
.section-head .legacy-eyebrow {
  color: hsl(var(--primary)) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  margin-bottom: 8px !important;
}
.section-head .lede {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}
.section-head + * { margin-top: 16px !important; }

/* Section-head right-side actions — right-align, wrap gracefully */
.section-head > div:last-child:not(:first-child) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Buttons in section-heads / anywhere — reset to shadcn look */
.section-head .btn,
.card-head .btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  transition: all 150ms ease;
}

/* Standard card head inside each sub-card */
.card-head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px !important;
}
.card-head h2,
.card-head h3 {
  font-family: 'Platypi', ui-serif, serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.card-head .sub {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}
.card-head .right {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 12px !important;
}

/* Profile-section-head, used inside individual profile sub-cards */
.profile-section-head {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px !important;
}
.profile-section-head h2 {
  font-family: 'Platypi', ui-serif, serif !important;
  font-size: 22px !important;
  color: hsl(var(--foreground)) !important;
  margin: 0 !important;
}
.profile-section-head .legacy-eyebrow {
  color: hsl(var(--primary)) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
}

/* Person / family / recipient cards — flat white with border */
.person-card,
.recipient-card {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  color: hsl(var(--card-foreground)) !important;
}
.person-card .avatar,
.recipient-card .avatar,
.sidebar-user .avatar {
  background: linear-gradient(135deg, hsl(var(--primary)), #9E6C2E) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: none !important;
}
.person-card .name,
.recipient-card .name {
  font-family: 'Platypi', serif !important;
  font-size: 17px !important;
  color: hsl(var(--foreground)) !important;
}
.person-card .sub,
.recipient-card .sub {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 13px !important;
  margin-top: 2px;
}

/* Segmented tab control (used for Living/Memorial filter, sub-tabs, etc.) */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: hsl(var(--muted));
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
}
.segmented-btn {
  background: transparent !important;
  border: none !important;
  color: hsl(var(--muted-foreground)) !important;
  padding: 8px 16px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 150ms ease;
}
.segmented-btn:hover { color: hsl(var(--foreground)) !important; }
.segmented-btn.active {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

/* Vault-tile grid */
.vault-tile {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
  transition: all 150ms ease;
}
.vault-tile:hover {
  border-color: hsl(var(--primary) / 0.4) !important;
  background: hsl(var(--accent) / 0.4) !important;
  transform: translateY(-1px);
}
.vault-tile .label {
  font-family: 'Platypi', serif !important;
  font-size: 17px !important;
  color: hsl(var(--foreground)) !important;
  margin-top: 10px;
}
.vault-tile .count {
  color: hsl(var(--primary)) !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
}
.vault-tile .preview {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 12.5px !important;
  margin-top: 6px;
  line-height: 1.5;
}

/* Card-grid helpers — used liberally across sections */
.card-grid { display: grid; gap: 16px; }
.card-grid.two   { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card-grid.three { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Timeline rail — Life Milestones on profile, Memorial Wall */
.timeline-row {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  position: relative;
}
.timeline-row .date {
  color: hsl(var(--primary)) !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.timeline-row .label {
  font-family: 'Platypi', serif !important;
  font-size: 18px !important;
  color: hsl(var(--foreground)) !important;
  margin-top: 4px;
}
.timeline-row .body {
  color: hsl(var(--muted-foreground)) !important;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
}

/* Inline field row — used in Values & Favourites */
.inline-field-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid hsl(var(--border));
}
.inline-field-row:last-child { border-bottom: none; }
.inline-field-lbl {
  color: hsl(var(--muted-foreground)) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.inline-field-row input {
  border: none !important;
  background: transparent !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
}
.inline-field-row input:focus {
  border-bottom-color: hsl(var(--primary)) !important;
  box-shadow: none !important;
}

/* Tree band — Family Tree horizontal bands */
.tree-band {
  /* No per-generation box — plain white background with black connector
     lines drawn between the bands (see .tree-band + .tree-band::before). */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  position: relative;
  justify-content: center;
}
.tree-band + .tree-band { margin-top: 22px; }
.tree-band-label {
  width: 100%;
  color: hsl(var(--primary)) !important;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------------
   Scrollbars — sober grey to fit the neutral surfaces.
   --------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(15,16,20,0.14);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15,16,20,0.24); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   Reduce motion: keep animations under one second so the site feels
   snappy on the new palette. Existing keyframes are respected.
   --------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------------
   Brand divider — gold → white → gold gradient rule that sits directly
   under the header logo across every page.
   .elm-brand-underline turns an element's bottom edge into the gradient
   (used on the page headers that already carried a plain bottom border);
   .elm-brand-divider is the same gradient as a standalone 2px bar.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Textareas — grow with their content (EM-005 / EM-007 / EM-021).
   The height itself is driven by the auto-grow utility in shadcn-ui.js;
   this just sets the floor and makes sure nothing caps the growth.
   --------------------------------------------------------------------- */
textarea {
  resize: vertical;
  min-height: 88px;
  max-height: none;
}

.elm-brand-underline {
  border-style: solid;
  border-width: 0 0 2px;
  border-image: linear-gradient(90deg, #78581C 0%, #ffffff 85%, #78581C 100%) 1;
}
.elm-brand-divider {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, #78581C 0%, #ffffff 85%, #78581C 100%);
}