/* CT Ledger — two-mode token system (from lore DESIGN.md + tailwind.input.css).
   Light is the app default; feedback lives under Settings (a content route). */
:root, [data-theme="light"] {
  --bg: #F5F8FA;
  --bg-deep: #EDF3F6;
  --surface: #FFFFFF;
  --surface-muted: #F1F5F7;
  --border: #DAE5EB;
  --text: #1E3340;
  --ink: #0F2230;
  --muted: #566E7D;
  --data: #2A4759;
  --accent: #1B5D7E;
  --accent-strong: #15506E;
  --accent-dim: rgba(27,93,126,.08);
  --up: #27754A;
  --down: #B23B2E;
  --warn: #876108;
  --up-wash: rgba(39,117,74,.12);
  --down-wash: rgba(178,59,46,.12);
  --warn-wash: rgba(135,97,8,.12);
  --accent-wash: rgba(27,93,126,.10);
  /* dark strip tokens (the command-strip / rail surfaces keep the Room feel
     even in light mode on the detail page — surface-deep is the recessed zone) */
  --strip-bg: #EDF3F6;
  --strip-text: #1E3340;
}
[data-theme="dark"] {
  --bg: #0E141A;
  --bg-deep: #0A0F14;
  --surface: #15202A;
  --surface-muted: #111A22;
  --border: #22323F;
  --text: #E5EDF2;
  --ink: #F2F8FB;
  --muted: #6C8294;
  --data: #AFC8D8;
  --accent: #3F8FB5;
  --accent-strong: #5BABD0;
  --accent-dim: rgba(63,143,181,.10);
  --up: #6FB591;
  --down: #D08276;
  --warn: #D9A441;
  --up-wash: rgba(111,181,145,.14);
  --down-wash: rgba(208,130,118,.14);
  --warn-wash: rgba(217,164,65,.14);
  --accent-wash: rgba(63,143,181,.14);
  --strip-bg: #0A0F14;
  --strip-text: #E5EDF2;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
.font-display { font-family: "Fraunces", Georgia, serif; }
.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
input, select { font: inherit; color: var(--text); }
::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 1px; }

/* chip tone helpers — mirror the app's bg-*/15 text-* recipe */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 9999px; padding: 1px 8px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.chip.up      { background: var(--up-wash); color: var(--up); }
.chip.down    { background: var(--down-wash); color: var(--down); }
.chip.warn    { background: var(--warn-wash); color: var(--warn); }
.chip.accent  { background: var(--accent-wash); color: var(--accent); }
.chip.mutedc  { background: var(--surface-muted); color: var(--muted); border: 1px solid var(--border); }
.dot { width: 6px; height: 6px; border-radius: 9999px; background: currentColor; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: lore-pulse 1.6s ease-in-out infinite; }
}
@keyframes lore-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* job-id chip — task #33 requirement: short job id, mono, state-colored */
.jobchip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 4px; padding: 1px 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; font-weight: 500;
  border: 1px solid;
}
.jobchip.up     { color: var(--up); border-color: color-mix(in srgb, var(--up) 35%, transparent); background: var(--up-wash); }
.jobchip.down   { color: var(--down); border-color: color-mix(in srgb, var(--down) 35%, transparent); background: var(--down-wash); }
.jobchip.warn   { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-wash); }
.jobchip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-wash); }
.jobchip.mutedc { color: var(--muted); border-color: var(--border); background: var(--surface-muted); }

/* thin scrollbars for rails */
.rail::-webkit-scrollbar { width: 8px; height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }