/* ─────────────────────────────────────────────────────────────────────────
   paper-trail · design tokens
   Extracted from outputs/papertrail-concept-marginalia.html (13 May 2026).
   Single source of truth — referenced by ui/app.js, ui/index.html,
   and (forward) any new component CSS.

   Both themes reference the same names; only the values switch.  Default
   is :root (dark, matches today's app).  data-theme="light" overrides for
   light mode, which is where the brand is heading.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── current dark palette (preserves today's look) ──────────────────── */
  --pt-bg:          #0F1117;
  --pt-bg-deep:    #0A0D14;
  --pt-surface:    #161B27;
  --pt-surface-2:  #1E2D40;
  --pt-rule:       #1E2D40;
  --pt-text:       #E2E8F0;
  --pt-text-soft:  #CBD5E1;
  --pt-text-mute:  #94A3B8;
  --pt-text-faint: #64748B;
  --pt-accent:     #3B82F6;
  --pt-accent-2:   #2563EB;
  --pt-accent-bg:  #1E3A5F;
  --pt-ok:         #22C55E;
  --pt-warn:       #F97316;
  --pt-stop:       #EF4444;
  --pt-audit:      #A78BFA;

  /* ── canonical brand tokens (used directly by new components) ───────── */
  --pt-ink:        #1A1612;
  --pt-bone:       #F7F3EB;
  --pt-bone-deep:  #EFE9DC;
  --pt-line:       #C8BFAE;
  --pt-line-soft:  #DDD4C0;
  --pt-ledger:     #1F4A3C;
  --pt-ledger-bg:  #E6EFE9;
  --pt-oxblood:    #963B2D;
  --pt-oxblood-bg: #F5E6E1;
  --pt-ochre:      #B58A2E;
  --pt-ochre-bg:   #F4E9CE;
  --pt-plum:       #4A3C5C;
  --pt-plum-bg:    #ECE4F0;

  /* type ramps (canonical) */
  --pt-serif: 'Source Serif 4','Source Serif Pro','Iowan Old Style',Georgia,serif;
  --pt-sans:  'IBM Plex Sans Condensed','IBM Plex Sans','Inter',system-ui,-apple-system,sans-serif;
  --pt-mono:  'IBM Plex Mono','SFMono-Regular','JetBrains Mono',Menlo,monospace;

  /* radii / motion */
  --pt-r-0: 0;
  --pt-r-1: 4px;
  --pt-r-2: 8px;
  --pt-r-3: 12px;
  --pt-motion-state:  120ms;
  --pt-motion-layout: 200ms;
  --pt-motion-modal:  320ms;
}

/* ── Marginalia palette — semantic vars point at brand tokens ─── */
:root {
  --pt-bg:         var(--pt-bone);
  --pt-bg-deep:    var(--pt-bone-deep);
  --pt-surface:    var(--pt-bone);
  --pt-surface-2:  var(--pt-bone-deep);
  --pt-rule:       var(--pt-line);
  --pt-text:       var(--pt-ink);
  --pt-text-soft:  #4A4138;
  --pt-text-mute:  #807468;
  --pt-text-faint: #BFB6A6;
  --pt-accent:     var(--pt-ledger);
  --pt-accent-2:   var(--pt-ledger);
  --pt-accent-bg:  var(--pt-ledger-bg);
  --pt-ok:         var(--pt-ledger);
  --pt-warn:       var(--pt-ochre);
  --pt-stop:       var(--pt-oxblood);
  --pt-audit:      var(--pt-plum);
  color-scheme: light;
}

/* ── body / typography hooks  ──────────────────────────────────────────── */
body {
  background: var(--pt-bone) !important;
  color: var(--pt-ink) !important;
  font-family: var(--pt-sans) !important;
  font-feature-settings: "kern","liga","onum";
}
h1,
h2,
h3,
.pt-display,
.splash-logo {
  font-family: var(--pt-serif) !important;
  font-feature-settings: "kern","liga","onum";
  letter-spacing: -0.01em;
  color: var(--pt-ink) !important;
}
.splash-logo span { color: var(--pt-ledger) !important; }
#app-splash { background: var(--pt-bone) !important; }
.splash-bar { background: var(--pt-line-soft) !important; }
.splash-bar::after { background: var(--pt-ledger) !important; }
.splash-sub { color: var(--pt-text-mute) !important; }
.mono,
code,
pre { font-family: var(--pt-mono) !important; }
.nav-item:hover { background: var(--pt-bone-deep) !important; }
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 2px var(--pt-ledger-bg) !important;
}

/* Bridge over the existing inline-CSS rules in index.html so light theme
   actually changes the page without rewriting every component. */
.sidebar    { background: var(--pt-bone-deep) !important; border-right-color: var(--pt-line) !important; }
.card       { background: var(--pt-bone)      !important; border-color: var(--pt-line)      !important; color: var(--pt-ink); }
.section-header { color: var(--pt-text-mute) !important; border-bottom-color: var(--pt-line) !important; }
th          { color: var(--pt-text-mute) !important; border-bottom-color: var(--pt-ink) !important; background: var(--pt-bone) !important; }
td          { color: var(--pt-ink)      !important; border-bottom-color: var(--pt-line-soft) !important; }
tr:hover td { background: var(--pt-bone-deep) !important; }
input,
select,
textarea {
  background: var(--pt-bone) !important;
  border-color: var(--pt-ink) !important;
  color: var(--pt-ink) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--pt-ledger) !important;
}
.btn-primary  { background: var(--pt-ink)  !important; color: var(--pt-bone) !important; }
.btn-primary:hover { background: var(--pt-ledger) !important; }
.btn-ghost    { background: transparent !important; color: var(--pt-ink) !important; border-color: var(--pt-ink) !important; }
.btn-ghost:hover { background: var(--pt-bone-deep) !important; }
.badge-queued     { background: var(--pt-bone-deep) !important; color: var(--pt-text-mute) !important; }
.badge-processing { background: var(--pt-ledger-bg) !important; color: var(--pt-ledger)    !important; }
.badge-complete   { background: var(--pt-ink) !important; color: var(--pt-bone) !important; }
.badge-failed     { background: var(--pt-oxblood-bg) !important; color: var(--pt-oxblood) !important; }
.badge-cancelled  { background: var(--pt-line) !important; color: var(--pt-ink) !important; }
.finding-req      { background: var(--pt-oxblood-bg) !important; border-left-color: var(--pt-oxblood) !important; }
.finding-exc      { background: var(--pt-ochre-bg)   !important; border-left-color: var(--pt-ochre)   !important; }
.finding-note     { background: var(--pt-ledger-bg)  !important; border-left-color: var(--pt-ledger)  !important; }
.nav-item.active  { background: var(--pt-ledger-bg) !important; border-left-color: var(--pt-ledger) !important; color: var(--pt-ink) !important; }
.mono { font-family: var(--pt-mono); }

/* PivotTable.js dark-theme rule reversal */
.pvtTable thead tr th,
.pvtTable tbody tr th { background: var(--pt-bone-deep) !important; color: var(--pt-ink) !important; border-color: var(--pt-line) !important; }
.pvtTable tbody tr td { background: var(--pt-bone) !important; color: var(--pt-ink) !important; border-color: var(--pt-line) !important; }

/* PT-588: pivotUI chrome (CDN pivot.min.css ships white/gray) — theme-tokenized */
.pvtUi { color: var(--pt-ink) !important; }
.pvtUi td { border-color: var(--pt-line-soft) !important; }
.pvtAxisContainer, .pvtVals { background: var(--pt-bone) !important; border-color: var(--pt-line) !important; }
.pvtAxisContainer li span.pvtAttr { background: var(--pt-bone-deep) !important; color: var(--pt-ink) !important; border-color: var(--pt-line) !important; }
select.pvtRenderer, select.pvtAggregator, select.pvtAttrDropdown { background: var(--pt-bone) !important; color: var(--pt-ink) !important; border-color: var(--pt-line) !important; }
.pvtFilterBox { background: var(--pt-bone) !important; color: var(--pt-ink) !important; border: 1px solid var(--pt-line) !important; }
.pvtFilterBox h4 { color: var(--pt-ink) !important; }
.pvtFilterBox input[type=text] { background: var(--pt-bone-deep) !important; color: var(--pt-ink) !important; border-color: var(--pt-line) !important; }
.pvtCheckContainer { background: var(--pt-bone) !important; border-color: var(--pt-line-soft) !important; }
.pvtCheckContainer p label { color: var(--pt-ink) !important; }
.pvtButton { background: var(--pt-bone-deep) !important; color: var(--pt-ink) !important; border: 1px solid var(--pt-line) !important; }
.pvtTable .pvtTotal, .pvtTable .pvtTotalLabel, .pvtTable .pvtGrandTotal { background: var(--pt-bone-deep) !important; color: var(--pt-ink) !important; }
.pvtTriangle { color: var(--pt-text-soft) !important; }

/* PT-405 — pulse animation for the active pipeline stage's progress bar,
   used by WorkflowPanel to highlight which stage is currently running. */
@keyframes pt-stage-bar-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.55; }
  100% { opacity: 1; }
}
.pt-stage-bar-active { animation: pt-stage-bar-pulse 1.6s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════════════
   PT-559 · TRUE DARK MODE — navy brand
   Palette from the live marketing site (paper-trail-marketing.html) and the
   approved navy mockup. Only the brand-token VALUES switch; component CSS is
   untouched. This selector out-specifies the unconditional light :root
   (0,2,0 > 0,1,0), so it applies ONLY when <html data-theme="dark">.
   Light remains the default (index.html bootstrap defaults pt_theme=light).
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  /* surfaces & ink — navy inversion */
  --pt-ink:        #F0F2F7;
  --pt-ink-soft:   #D6DEEC;
  --pt-bone:       #0F1117;
  --pt-bone-deep:  #161820;
  --pt-line:       #1E2535;
  --pt-line-soft:  #141A28;
  /* brand accents retuned for navy dark */
  --pt-ledger:     #3B82F6;   /* primary / links / active / in-progress */
  --pt-ledger-bg:  #16263F;
  --pt-oxblood:    #EF4444;   /* requirement / danger */
  --pt-oxblood-bg: #2C1719;
  --pt-ochre:      #F59E0B;   /* exception / warning */
  --pt-ochre-bg:   #2A2110;
  --pt-plum:       #A78BFA;   /* audit */
  --pt-plum-bg:    #221E33;
  /* text ramp (the light 2nd :root hardcodes warm values — re-set here) */
  --pt-text:       #F0F2F7;
  --pt-text-soft:  #9BA8C4;
  --pt-text-mute:  #6B7A99;
  --pt-text-faint: #46506B;
  /* success stays green — don't let it inherit the blue accent */
  --pt-ok:         #22C55E;
  /* typography → Inter + JetBrains Mono (marketing-brand parity) */
  --pt-serif: 'Inter', system-ui, -apple-system, sans-serif;
  --pt-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --pt-mono:  'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', monospace;
  color-scheme: dark;
}
/* page sits a shade deeper than cards, like the marketing site */
:root[data-theme="dark"] body { background: #08090D !important; }

/* ── dark-only component refinements (gated; light theme untouched) ────── */
/* blue primary CTA + white label (brand signature) */
:root[data-theme="dark"] .pt-btn,
:root[data-theme="dark"] .btn-primary { background: var(--pt-ledger) !important; color: #FFFFFF !important; }
:root[data-theme="dark"] .pt-btn:hover:not(:disabled),
:root[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #1D4ED8 !important; }
/* keep genuine success / complete / done states green, not blue */
:root[data-theme="dark"] .pt-status.pt-complete .pt-dot { background: var(--pt-ok) !important; box-shadow: 0 0 0 3px rgba(34,197,94,.18) !important; }
:root[data-theme="dark"] .pt-metric .pt-value.pt-ok { color: var(--pt-ok) !important; }
:root[data-theme="dark"] .wf-stage-dot.done  { background: #12251B !important; border-color: var(--pt-ok) !important; color: var(--pt-ok) !important; }
:root[data-theme="dark"] .wf-stage-label.done { color: var(--pt-ok) !important; }
:root[data-theme="dark"] .wf-connector.done   { background: var(--pt-ok) !important; }
/* native date-picker chrome follows the dark scheme */
:root[data-theme="dark"] input[type="date"] { color-scheme: dark; background: var(--pt-bone-deep) !important; }
/* queued status-dot halo reads on dark (light theme used a near-black halo) */
:root[data-theme="dark"] .pt-status.pt-queued .pt-dot { box-shadow: 0 0 0 3px rgba(255,255,255,.06); }

/* dark headings track the marketing Inter display weight */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] .pt-display,
:root[data-theme="dark"] .pt-tomb-headline { font-weight: 700; letter-spacing: -0.02em; }

/* ═══════════════════════════════════════════════════════════════════════
   PT570-S13 · THEME PRESETS (beyond Ledger=light and Navy Trust=dark)
   Same token names, different values — exactly the PT-559 pattern. Each
   block re-sets the brand tokens + the text ramp (the light 2nd :root
   hardcodes warm hexes). All hexes AA-checked (scripted WCAG, 2026-06-06):
   ink>=14, muted>=4.9, accents>=4.5 against their backgrounds.
   Aliases: "light"→Ledger, "dark"→Navy Trust (handled in Settings UI).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Counsel Oxblood — old-law-firm gravitas, parchment + oxblood ─────── */
:root[data-theme="counsel-oxblood"] {
  --pt-ink:        #241D1B;
  --pt-bone:       #F8F4EC;
  --pt-bone-deep:  #EFE7D9;
  --pt-line:       #D9CDBC;
  --pt-line-soft:  #E6DCCC;
  --pt-ledger:     #6E1F2A;   /* oxblood is the working accent here */
  --pt-ledger-bg:  #F0DFD8;
  --pt-oxblood:    #7A2230;
  --pt-oxblood-bg: #F3DEDA;
  --pt-ochre:      #8A6A21;   /* brass */
  --pt-ochre-bg:   #F1E6C8;
  --pt-plum:       #4A3C5C;
  --pt-plum-bg:    #E9E1EE;
  --pt-text:       var(--pt-ink);
  --pt-text-soft:  #4C4038;
  --pt-text-mute:  #75665A;
  --pt-text-faint: #BBAE9C;
  --pt-ok:         #2F6B4F;
  color-scheme: light;
}

/* ── Recorder Slate — neutral, dense, operations desk ─────────────────── */
:root[data-theme="recorder-slate"] {
  --pt-ink:        #22262B;
  --pt-bone:       #F4F6F8;
  --pt-bone-deep:  #E9EDF1;
  --pt-line:       #CBD3DC;
  --pt-line-soft:  #DDE3EA;
  --pt-ledger:     #33658A;   /* steel blue */
  --pt-ledger-bg:  #DFE9F2;
  --pt-oxblood:    #B03A3A;
  --pt-oxblood-bg: #F2DEDE;
  --pt-ochre:      #9A5A0E;   /* signal amber, AA-darkened */
  --pt-ochre-bg:   #F4E6CF;
  --pt-plum:       #4F4668;
  --pt-plum-bg:    #E6E2F0;
  --pt-text:       var(--pt-ink);
  --pt-text-soft:  #454C55;
  --pt-text-mute:  #5F6A76;
  --pt-text-faint: #A6AFBA;
  --pt-ok:         #2F7D52;
  color-scheme: light;
}

/* ── Homestead Sage — soft, client-deliverable-friendly ───────────────── */
:root[data-theme="homestead-sage"] {
  --pt-ink:        #26241E;
  --pt-bone:       #F7F6F0;
  --pt-bone-deep:  #EDEBE0;
  --pt-line:       #D6D2C2;
  --pt-line-soft:  #E2DFD2;
  --pt-ledger:     #4E6B4A;   /* sage */
  --pt-ledger-bg:  #E4ECE2;
  --pt-oxblood:    #9A4632;   /* clay */
  --pt-oxblood-bg: #F2E0DA;
  --pt-ochre:      #8F6B25;
  --pt-ochre-bg:   #F0E8CF;
  --pt-plum:       #4A4458;
  --pt-plum-bg:    #E8E4EE;
  --pt-text:       var(--pt-ink);
  --pt-text-soft:  #49453B;
  --pt-text-mute:  #6F6A58;
  --pt-text-faint: #B5AF9D;
  --pt-ok:         #4E6B4A;
  color-scheme: light;
}

/* ── Abstract Amber — dark-neutral, warm amber accent (night examiners) ─ */
:root[data-theme="abstract-amber"] {
  --pt-ink:        #EDEAE2;
  --pt-bone:       #15161A;
  --pt-bone-deep:  #1D1F24;
  --pt-line:       #2A2D35;
  --pt-line-soft:  #22252C;
  --pt-ledger:     #C28F2C;   /* ochre as primary */
  --pt-ledger-bg:  #2A2310;
  --pt-oxblood:    #E25A4A;
  --pt-oxblood-bg: #2E1916;
  --pt-ochre:      #D9A53C;
  --pt-ochre-bg:   #2B2310;
  --pt-plum:       #B49CF2;
  --pt-plum-bg:    #232036;
  --pt-text:       #EDEAE2;
  --pt-text-soft:  #C9C4B8;
  --pt-text-mute:  #95907F;
  --pt-text-faint: #5C5A50;
  --pt-ok:         #4CAF7D;
  color-scheme: dark;
}
:root[data-theme="abstract-amber"] body { background: #101114 !important; }
:root[data-theme="abstract-amber"] .pt-btn,
:root[data-theme="abstract-amber"] .btn-primary { background: var(--pt-ledger) !important; color: #1A1409 !important; }
:root[data-theme="abstract-amber"] .pt-btn:hover:not(:disabled),
:root[data-theme="abstract-amber"] .btn-primary:hover:not(:disabled) { background: #A87A22 !important; }
:root[data-theme="abstract-amber"] input[type="date"] { color-scheme: dark; background: var(--pt-bone-deep) !important; }