/* DATA — theme variants for The Signal (applied via html[data-theme]) */

/* Default (no data-theme) remains as defined in styles.css :root */

/* 1) Aurora Noir — neon gradients on deep space */
html[data-theme="aurora-noir"] {
  --bg:#080b16; --card:#0f1424; --text:#e8ecff; --muted:#92a0c3;
  --accent:#7cddf5; --accent-2:#b983ff; --accent-3:#36f1a9;
  --border:#1f2a44; --shadow:rgba(124,221,245,0.22);
  --link:#7cddf5;
  --glow:0 0 24px rgba(124,221,245,0.25), 0 0 48px rgba(185,131,255,0.12);
}

/* 2) Paper Ledger — clean light, subtle grid */
html[data-theme="paper-ledger"] {
  --bg:#f6f7fb; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
  --accent:#0ea5e9; --accent-2:#9ca3af; --accent-3:#16a34a;
  --border:#e5e7eb; --shadow:rgba(3,7,18,0.06);
  --link:#0ea5e9;
}

/* 3) Solas Plasma — cosmic magentas & gold */
html[data-theme="solas-plasma"] {
  --bg:#0b0a16; --card:#141128; --text:#f3e8ff; --muted:#c7b9ff;
  --accent:#fde047; --accent-2:#f472b6; --accent-3:#60a5fa;
  --border:#2b224a; --shadow:rgba(253,224,71,0.18);
  --link:#f472b6;
}

/* 4) MidSouth Steel — industrial slate + safety yellow */
html[data-theme="midsouth-steel"] {
  --bg:#0f1115; --card:#151922; --text:#e6edf3; --muted:#9aa4b2;
  --accent:#facc15; --accent-2:#94a3b8; --accent-3:#38bdf8;
  --border:#232a36; --shadow:rgba(250,204,21,0.18);
  --link:#facc15;
}

/* 5) Ocean Glass — soft glassmorphism blues */
html[data-theme="ocean-glass"] {
  --bg:#08121d; --card:rgba(16,32,48,0.7); --text:#e6f0ff; --muted:#a8c0d8;
  --accent:#7cc4ff; --accent-2:#99e2ff; --accent-3:#90f0d0;
  --border:#16324a; --shadow:rgba(124,196,255,0.2);
  --link:#7cc4ff;
  backdrop-filter: blur(6px);
}

/* Generic component touches (optional, respects existing class names) */
.settings-tab { 
  display:inline-flex; align-items:center; gap:.5rem; 
  padding:.4rem .7rem; border-radius:10px;
  background:linear-gradient(135deg, var(--card), transparent);
  border:1px solid var(--border); box-shadow: var(--glow, none);
}
.settings-tab .gear{filter:drop-shadow(0 0 8px var(--shadow));}



/* ===== Paper Ledger — Tree polish ===== */
html[data-theme="paper-ledger"] #tree {
  --row-h: 34px;
  --row-pad-x: 10px;
  --row-pad-y: 6px;
  --row-bg: #ffffff;
  --row-bg-alt: #fbfdff;
  --row-hover: #f2f7fc;
  --row-active: #e6f2fb;
  --ink: #1f2937;
  --sub: #6b7280;
  --rail: #e5e7eb;
  --accent: var(--accent, #0ea5e9);
  --accent-soft: rgba(14,165,233,.12);
  --ring: rgba(14,165,233,.35);
  font-size: 15px;
}
html[data-theme="paper-ledger"] #tree .row,
html[data-theme="paper-ledger"] #tree [class*="node"],
html[data-theme="paper-ledger"] #tree [class*="item"] {
  display:flex; align-items:center; gap:.6rem;
  min-height: var(--row-h);
  padding: var(--row-pad-y) var(--row-pad-x);
  border-bottom: 1px solid var(--rail);
  background: var(--row-bg);
  color: var(--ink);
}
html[data-theme="paper-ledger"] #tree .row:nth-child(even),
html[data-theme="paper-ledger"] #tree [class*="node"]:nth-child(even),
html[data-theme="paper-ledger"] #tree [class*="item"]:nth-child(even){
  background: var(--row-bg-alt);
}
html[data-theme="paper-ledger"] #tree [data-depth="1"]{ padding-left: calc(var(--row-pad-x) + 14px); border-left: 2px solid var(--rail);}
html[data-theme="paper-ledger"] #tree [data-depth="2"]{ padding-left: calc(var(--row-pad-x) + 28px); border-left: 2px solid var(--rail);}
html[data-theme="paper-ledger"] #tree [data-depth="3"]{ padding-left: calc(var(--row-pad-x) + 42px); border-left: 2px solid var(--rail);}
html[data-theme="paper-ledger"] #tree .toggle,
html[data-theme="paper-ledger"] #tree [data-toggle]{
  width:22px;height:22px;display:grid;place-items:center; 
  border:1px solid var(--rail); border-radius:7px; 
  background:#fff; cursor:pointer; user-select:none;
  box-shadow:0 1px 0 var(--shadow);
  transition: transform .2s ease;
}
html[data-theme="paper-ledger"] #tree .toggle.open,
html[data-theme="paper-ledger"] #tree [data-toggle].open{ transform: rotate(90deg); }
html[data-theme="paper-ledger"] #tree .title,
html[data-theme="paper-ledger"] #tree [data-title]{ font-weight:600; color:var(--ink); letter-spacing:.1px; }
html[data-theme="paper-ledger"] #tree .meta,
html[data-theme="paper-ledger"] #tree [data-meta]{ color:var(--sub); font-size:.92em; }
html[data-theme="paper-ledger"] #tree .count,
html[data-theme="paper-ledger"] #tree [data-count]{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:24px; padding:0 8px;
  font-weight:700; font-variant-numeric: tabular-nums;
  background: var(--accent-soft);
  color:#0b6fa3;
  border:1px solid #d3ecfb; border-radius: 10px;
}
html[data-theme="paper-ledger"] #tree .row:hover,
html[data-theme="paper-ledger"] #tree [class*="node"]:hover,
html[data-theme="paper-ledger"] #tree [class*="item"]:hover{ background: var(--row-hover); }
html[data-theme="paper-ledger"] #tree .row.active,
html[data-theme="paper-ledger"] #tree .row.selected,
html[data-theme="paper-ledger"] #tree [aria-current="true"],
html[data-theme="paper-ledger"] #tree [data-selected="true"]{
  background: var(--row-active);
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}
html[data-theme="paper-ledger"] #tree .chip,
html[data-theme="paper-ledger"] #tree [data-chip]{
  padding:.15rem .5rem; border:1px solid var(--rail); border-radius:999px;
  background:#fff; font-size:.85em; color:var(--sub);
}
html[data-theme="paper-ledger"] #tree .chip.pos{ border-color:#c8f3dc; background:#f0fff7; color:#167a3b }
html[data-theme="paper-ledger"] #tree .chip.neg{ border-color:#ffd5d5; background:#fff6f6; color:#a12e2e }
html[data-theme="paper-ledger"] #tree::-webkit-scrollbar{ height:10px; width:10px }
html[data-theme="paper-ledger"] #tree::-webkit-scrollbar-track{ background:#eef3f8; border-left:1px solid var(--rail) }
html[data-theme="paper-ledger"] #tree::-webkit-scrollbar-thumb{ background:#cfd9e4; border:2px solid #eef3f8; border-radius:10px }
html[data-theme="paper-ledger"] #tree::-webkit-scrollbar-thumb:hover{ background:#b9c9d9 }
html[data-theme="paper-ledger"] .header .search{
  background:#fff; border:1px solid var(--rail); border-radius:10px;
  box-shadow:0 1px 0 var(--shadow); color:var(--ink);
}
html[data-theme="paper-ledger"] .header .search:focus{ outline:2px solid var(--ring); border-color:#bfe7ff; }
html[data-theme="paper-ledger"] #app-tabs .app-tab{
  background:#fff; border:1px solid var(--rail); border-radius:10px; 
  box-shadow:0 1px 0 var(--shadow);
}
html[data-theme="paper-ledger"] #app-tabs .app-tab.active{
  border-color:#cfe9fb; box-shadow:0 0 0 2px var(--accent-soft) inset;
}

... (see above, Paper Ledger v2 CSS) ...


/* ===== Paper Ledger v2 — sidebar cards, dotted rails, binder tabs, typography ===== */
html[data-theme="paper-ledger"] {
  --ledger-card: #ffffff;
  --ledger-ink: #1f2937;
  --ledger-sub: #6b7280;
  --ledger-rail: #dfe6ee;
  --ledger-rail-strong: #cfd8e3;
  --ledger-shadow: rgba(3,7,18,0.06);
  --ledger-ring: rgba(14,165,233,0.35);
  --ledger-accent: #0ea5e9;
  --ledger-accent-soft: rgba(14,165,233,.12);
}

/* Binder-style tabs */
html[data-theme="paper-ledger"] #app-tabs {
  gap: 8px;
}
html[data-theme="paper-ledger"] #app-tabs .app-tab{
  background: var(--ledger-card);
  color: var(--ledger-ink);
  border: 1px solid var(--ledger-rail);
  border-bottom-width: 2px;
  border-radius: 8px;
  box-shadow: 0 1px 0 var(--ledger-shadow);
  transition: box-shadow .18s ease, border-color .18s ease, transform .06s ease;
}
html[data-theme="paper-ledger"] #app-tabs .app-tab:hover{
  transform: translateY(-1px);
  border-color: var(--ledger-rail-strong);
}
html[data-theme="paper-ledger"] #app-tabs .app-tab.active{
  border-color: #cfe9fb;
  box-shadow: 0 0 0 2px var(--ledger-accent-soft) inset;
}

/* Tree: section cards (top-level groups) */
html[data-theme="paper-ledger"] #tree .section,
html[data-theme="paper-ledger"] #tree [data-section]{
  background: var(--ledger-card);
  border: 1px solid var(--ledger-rail);
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--ledger-shadow);
  margin: 8px 8px 10px;
  overflow: hidden;
}

/* Section header */
html[data-theme="paper-ledger"] #tree .section > .row:first-child,
html[data-theme="paper-ledger"] #tree [data-section] > .row:first-child{
  background: #f8fbff;
  font-variant-caps: all-small-caps;
  letter-spacing: .6px;
  color: var(--ledger-ink);
}

/* rows & zebra inside sections already styled earlier; add stronger active line */
html[data-theme="paper-ledger"] #tree .row.active,
html[data-theme="paper-ledger"] #tree [aria-current="true"],
html[data-theme="paper-ledger"] #tree [data-selected="true"]{
  background: #edf6fe;
  outline: 2px solid var(--ledger-ring);
  outline-offset: -2px;
  position: relative;
}
html[data-theme="paper-ledger"] #tree .row.active::before,
html[data-theme="paper-ledger"] #tree [aria-current="true"]::before,
html[data-theme="paper-ledger"] #tree [data-selected="true"]::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--ledger-accent);
}

/* Dotted rails for hierarchy (ledger columns) */
html[data-theme="paper-ledger"] #tree [data-depth="1"]{ 
  padding-left: 18px; border-left: 2px dotted var(--ledger-rail);
}
html[data-theme="paper-ledger"] #tree [data-depth="2"]{ 
  padding-left: 32px; border-left: 2px dotted var(--ledger-rail);
}
html[data-theme="paper-ledger"] #tree [data-depth="3"]{ 
  padding-left: 46px; border-left: 2px dotted var(--ledger-rail);
}

/* Toggle chevrons as compact squares */
html[data-theme="paper-ledger"] #tree .toggle,
html[data-theme="paper-ledger"] #tree [data-toggle]{
  width: 22px; height: 22px;
  border: 1px solid var(--ledger-rail);
  border-radius: 6px;
  background: #fff;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
html[data-theme="paper-ledger"] #tree [data-toggle][aria-expanded="true"],
html[data-theme="paper-ledger"] #tree [data-toggle][data-open="true"]{
  transform: rotate(90deg);
  background: #f6fbff;
  border-color: var(--ledger-rail-strong);
}

/* Titles & meta typography */
html[data-theme="paper-ledger"] #tree .title,
html[data-theme="paper-ledger"] #tree [data-title]{ 
  font-weight: 600; color: var(--ledger-ink); letter-spacing: .1px; 
}
html[data-theme="paper-ledger"] #tree .meta,
html[data-theme="paper-ledger"] #tree [data-meta]{ 
  color: var(--ledger-sub); font-size: .92em; font-style: italic;
}

/* Count pills tighter */
html[data-theme="paper-ledger"] #tree .count,
html[data-theme="paper-ledger"] #tree [data-count]{
  min-width: 24px; height: 22px; padding: 0 6px;
  background: var(--ledger-accent-soft);
  border: 1px solid #d3ecfb;
  border-radius: 9px;
  font-weight: 700; font-size: .85em;
  color: #0b6fa3;
}