// Life Memory Tree — theming layer for the responsive overhaul.
//
// Everything new (chrome + pages) is written against CSS custom properties so a
// single attribute flip switches light/dark, retints the accent, and rescales
// density + motion. The reused viz (LifeTree/LifeGraph) keeps its luminous paper
// canvas and is framed as a "window" — which reads beautifully on dark too.

window.LMTX = (function () {
  // Accent presets surfaced as Tweaks.
  const ACCENTS = {
    evergreen: { name: 'Evergreen', solid: '#15803d', soft: '#22c55e' },
    cobalt:    { name: 'Cobalt',    solid: '#2563eb', soft: '#60a5fa' },
    plum:      { name: 'Plum',      solid: '#9333ea', soft: '#c084fc' },
    ember:     { name: 'Ember',     solid: '#d97706', soft: '#fbbf24' },
    rose:      { name: 'Rose',      solid: '#e11d48', soft: '#fb7185' },
    teal:      { name: 'Teal',      solid: '#0d9488', soft: '#2dd4bf' },
  };
  return { ACCENTS };
})();

// One big stylesheet, injected once. Scoped to .lmtx.
if (typeof document !== 'undefined' && !document.getElementById('lmtx-theme')) {
  const s = document.createElement('style');
  s.id = 'lmtx-theme';
  s.textContent = `
  .lmtx {
    /* ── light (default) ── */
    --bg:#ecece4; --bg2:#f4f4ee; --raised:#ffffff; --raised2:#fbfbf7;
    --sunken:#e7e7df; --edge:#dcdcd2; --hair:#e8e8df; --edge-strong:#cdcdc2;
    --ink:#0d1410; --muted:#54635c; --faint:#8d958f; --ghost:#b6bbb6;
    --accent:#15803d; --accent-soft:#22c55e; --accent-fg:#ffffff;
    --accent-wash:#15803d14; --accent-line:#15803d33;
    --shadow-card:0 1px 0 rgba(13,20,16,.04), 0 1px 3px rgba(13,20,16,.05), 0 18px 40px -24px rgba(13,20,16,.16);
    --shadow-float:0 10px 40px -8px rgba(13,20,16,.22), 0 2px 10px rgba(13,20,16,.08);
    --shadow-pop:0 2px 6px rgba(13,20,16,.08);
    --glass:rgba(255,255,255,.72);
    --tree-bg:#fbfbf7;
    /* density */
    --sp:1; --pad-card:18px; --row-h:44px; --radius:14px;
    /* motion multiplier */
    --mo:1;
    color-scheme:light;
  }
  .lmtx[data-theme="dark"] {
    --bg:#080b09; --bg2:#0c100d; --raised:#141a16; --raised2:#10150f;
    --sunken:#0c100d; --edge:#26302a; --hair:#1c241f; --edge-strong:#33403a;
    --ink:#edf2ec; --muted:#9caaa1; --faint:#69756d; --ghost:#49524c;
    --accent:#34d27e; --accent-soft:#22c55e; --accent-fg:#04140b;
    --accent-wash:#34d27e1f; --accent-line:#34d27e3d;
    --shadow-card:0 1px 0 rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.4), 0 24px 50px -28px rgba(0,0,0,.7);
    --shadow-float:0 16px 50px -10px rgba(0,0,0,.7), 0 3px 12px rgba(0,0,0,.5);
    --shadow-pop:0 3px 10px rgba(0,0,0,.5);
    --glass:rgba(20,26,22,.72);
    --tree-bg:#0e1410;
    color-scheme:dark;
  }
  .lmtx[data-density="compact"] { --pad-card:13px; --row-h:38px; --radius:12px; --sp:.82; }

  .lmtx { background:var(--bg); color:var(--ink);
    font-family:'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased; font-feature-settings:"ss01","cv11";
    transition: background .5s ease, color .5s ease; }
  .lmtx .disp { font-family:'Geist',sans-serif; letter-spacing:-0.028em; font-feature-settings:"ss01","cv11","cv09"; }
  .lmtx .serif { font-family:'Newsreader',Georgia,serif; letter-spacing:-0.005em; }
  .lmtx .mono { font-family:'JetBrains Mono',ui-monospace,monospace; font-feature-settings:"ss02","zero"; }
  .lmtx .tnum { font-variant-numeric:tabular-nums; }
  .lmtx ::selection { background:var(--accent-wash); }

  /* surfaces */
  .lmtx .card { background:var(--raised); border:1px solid var(--hair); border-radius:var(--radius); }
  .lmtx .card-r { background:var(--raised); border:1px solid var(--edge); border-radius:var(--radius); box-shadow:var(--shadow-card); }
  .lmtx .well { background:var(--sunken); border:1px solid var(--edge); border-radius:calc(var(--radius) - 4px); }
  .lmtx .hair { border-color:var(--hair); }

  /* scrollbars */
  .lmtx .scroll::-webkit-scrollbar { width:8px; height:8px; }
  .lmtx .scroll::-webkit-scrollbar-thumb { background:var(--edge-strong); border-radius:4px; border:2px solid transparent; background-clip:padding-box; }
  .lmtx .scroll::-webkit-scrollbar-thumb:hover { background:var(--faint); background-clip:padding-box; }
  .lmtx .scroll::-webkit-scrollbar-track { background:transparent; }
  .lmtx :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

  /* generic interactive lift */
  .lmtx .lift { transition: transform calc(.18s*var(--mo)) cubic-bezier(.2,.7,.2,1), box-shadow calc(.18s*var(--mo)) ease, border-color .18s ease, background .18s ease; }
  .lmtx .lift:hover { transform: translateY(-2px); box-shadow:var(--shadow-card); border-color:var(--edge-strong); }
  .lmtx .press { transition: transform calc(.12s*var(--mo)) ease; }
  .lmtx .press:active { transform: scale(.97); }

  /* nav item */
  .lmtx .nav-item { position:relative; display:flex; align-items:center; gap:11px; width:100%;
    padding:9px 11px; border-radius:11px; color:var(--muted); border:1px solid transparent;
    font-size:13.5px; font-weight:500; cursor:pointer; background:transparent; text-align:left;
    transition: color .16s ease, background .16s ease, transform .16s cubic-bezier(.2,.7,.2,1); }
  .lmtx .nav-item:hover { color:var(--ink); background:var(--sunken); }
  .lmtx .nav-item .ni-ic { font-size:18px; flex:0 0 auto; display:grid; place-items:center; transition:transform .2s cubic-bezier(.2,.7,.2,1), color .16s; }
  .lmtx .nav-item:hover .ni-ic { transform: scale(1.12) rotate(-4deg); color:var(--accent); }
  .lmtx .nav-item[data-active="true"] { color:var(--ink); background:var(--accent-wash); border-color:var(--accent-line); }
  .lmtx .nav-item[data-active="true"] .ni-ic { color:var(--accent); }
  .lmtx .nav-item[data-active="true"]::before { content:""; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
    width:4px; height:20px; border-radius:0 4px 4px 0; background:var(--accent); box-shadow:0 0 12px var(--accent-soft); animation:lmtx-rail calc(.3s*var(--mo)) cubic-bezier(.2,.8,.2,1); }
  @keyframes lmtx-rail { from { height:0; opacity:0; } to { height:20px; opacity:1; } }

  /* buttons */
  .lmtx .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:inherit;
    font-size:13px; font-weight:600; padding:9px 14px; border-radius:10px; cursor:pointer; border:1px solid transparent;
    transition: transform .14s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease, background .16s ease, border-color .16s, color .16s; white-space:nowrap; }
  .lmtx .btn:active { transform: scale(.96); }
  .lmtx .btn-pri { background:var(--accent); color:var(--accent-fg); box-shadow:0 1px 0 rgba(0,0,0,.06), 0 6px 16px -8px var(--accent); }
  .lmtx .btn-pri:hover { box-shadow:0 2px 0 rgba(0,0,0,.06), 0 12px 26px -10px var(--accent); transform:translateY(-1px); }
  .lmtx .btn-ink { background:var(--ink); color:var(--bg2); }
  .lmtx .btn-ink:hover { transform:translateY(-1px); box-shadow:var(--shadow-pop); }
  .lmtx .btn-ghost { background:transparent; color:var(--muted); }
  .lmtx .btn-ghost:hover { background:var(--sunken); color:var(--ink); }
  .lmtx .btn-out { background:var(--raised); color:var(--ink); border-color:var(--edge); }
  .lmtx .btn-out:hover { border-color:var(--edge-strong); background:var(--sunken); transform:translateY(-1px); }
  .lmtx .icon-btn { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; cursor:pointer;
    color:var(--muted); background:transparent; border:1px solid transparent; font-size:18px;
    transition: background .16s, color .16s, transform .16s, border-color .16s; }
  .lmtx .icon-btn:hover { background:var(--sunken); color:var(--ink); }
  .lmtx .icon-btn:active { transform:scale(.92); }

  /* inputs */
  .lmtx .input { width:100%; background:var(--sunken); border:1px solid var(--edge); border-radius:11px;
    padding:10px 13px; font-family:inherit; font-size:13.5px; color:var(--ink); outline:none;
    transition: border-color .16s, box-shadow .16s, background .16s; }
  .lmtx .input::placeholder { color:var(--ghost); }
  .lmtx .input:focus { border-color:var(--accent); background:var(--raised); box-shadow:0 0 0 3px var(--accent-wash); }

  /* pill / chip */
  .lmtx .pill { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px;
    font-size:11.5px; font-weight:600; border:1px solid var(--edge); background:var(--sunken); color:var(--muted); white-space:nowrap; }
  .lmtx .pill-accent { background:var(--accent-wash); border-color:var(--accent-line); color:var(--accent); }

  /* dividers */
  .lmtx .vdiv { width:1px; align-self:stretch; background:var(--hair); }

  /* ── entrance animations ── */
  @keyframes lmtx-rise { from { opacity:0; transform: translateY(14px) scale(.99); } to { opacity:1; transform:none; } }
  @keyframes lmtx-fade { from { opacity:0; } to { opacity:1; } }
  @keyframes lmtx-pop  { from { opacity:0; transform: scale(.9); } to { opacity:1; transform:scale(1); } }
  @keyframes lmtx-slidein { from { opacity:0; transform: translateX(-10px); } to { opacity:1; transform:none; } }
  .lmtx .rise { animation: lmtx-rise calc(.5s*var(--mo)) cubic-bezier(.2,.7,.2,1) both; }
  .lmtx .fade { animation: lmtx-fade calc(.5s*var(--mo)) ease both; }
  .lmtx .pop  { animation: lmtx-pop calc(.4s*var(--mo)) cubic-bezier(.2,.8,.2,1) both; }
  .lmtx[data-motion="off"] .rise, .lmtx[data-motion="off"] .fade, .lmtx[data-motion="off"] .pop { animation:none !important; }
  .lmtx[data-motion="off"] * { animation-duration:.001s !important; transition-duration:.001s !important; }

  /* live dot */
  @keyframes lmtx-ping { 0% { transform:scale(.6); opacity:.8; } 80%,100% { transform:scale(2.4); opacity:0; } }
  .lmtx .live { position:relative; }
  .lmtx .live::after { content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:lmtx-ping calc(1.8s*var(--mo)) cubic-bezier(0,.5,.5,1) infinite; }
  @keyframes lmtx-breathe { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.88); opacity:.6; } }
  .lmtx .breathe { animation: lmtx-breathe calc(2.4s*var(--mo)) ease-in-out infinite; }
  @keyframes lmtx-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
  .lmtx .floaty { animation: lmtx-float calc(5s*var(--mo)) ease-in-out infinite; }
  @keyframes lmtx-spin { to { transform:rotate(360deg); } }
  .lmtx .spin { animation: lmtx-spin calc(1s*var(--mo)) linear infinite; }
  @keyframes lmtx-shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
  .lmtx .shimmer { background:linear-gradient(90deg,transparent,var(--accent-wash),transparent); background-size:200% 100%; animation:lmtx-shimmer calc(1.6s*var(--mo)) linear infinite; }

  /* skeleton for staggered children: set style=--i */
  .lmtx .stagger > * { animation: lmtx-rise calc(.55s*var(--mo)) cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i,0) * .045s * var(--mo)); }
  .lmtx[data-motion="off"] .stagger > * { animation:none !important; }

  /* safety net: once a route has settled, force entrance elements to their
     visible end-state so paused/frozen CSS animations can never hide content. */
  .lmtx.anim-ready .route-anim,
  .lmtx.anim-ready .stagger > *,
  .lmtx.anim-ready .rise,
  .lmtx.anim-ready .pop,
  .lmtx.anim-ready .fade { opacity:1 !important; transform:none !important; animation:none !important; }
  .lmtx.anim-ready .lx-grow,
  .lmtx.anim-ready .meter > i { animation:none !important; }

  /* meter bar */
  .lmtx .meter { height:6px; border-radius:999px; background:var(--sunken); overflow:hidden; }
  .lmtx .meter > i { display:block; height:100%; border-radius:999px; background:var(--accent); animation: lmtx-grow calc(.9s*var(--mo)) cubic-bezier(.2,.8,.2,1) both; }
  @keyframes lmtx-grow { from { width:0 !important; } }
  `;
  document.head.appendChild(s);
}

// React helpers for theme-aware components.
window.LMTXUtil = (function () {
  const cx = (...a) => a.filter(Boolean).join(' ');
  // turn a hex + alpha into rgba string for inline wash
  function wash(hex, a) {
    const h = hex.replace('#','');
    const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
    return `rgba(${r},${g},${b},${a})`;
  }
  return { cx, wash };
})();