/* ============================================================
   SC LOGBOOK — REDESIGN TOKENS
   Shared design tokens used by both Direction A (Manifest) and
   Direction B (Console). Tweaks panel rewrites these at runtime.
   ============================================================ */

:root {
  /* Surfaces — deep cool blue-black, less navy than original */
  --bg-void:   #04090f;   /* page void background */
  --bg-0:      #070e16;   /* deepest panel / input */
  --bg-1:      #0a131d;   /* base surface */
  --bg-2:      #0f1c2a;   /* card surface */
  --bg-3:      #16283b;   /* hover / raised */
  --bg-4:      #1d3650;   /* highest, drop-shadow stops */

  --line:      #1f3650;
  --line-soft: #15263a;
  --line-glow: #2a4d72;

  /* Text */
  --text:      #e2edf6;
  --text-dim:  #8da5bd;
  --text-mute: #56708a;
  --text-ghost: #3a5066;

  /* ── Palette atoms ── */
  --cyan:      #36d2ff;   /* primary / mining type */
  --copper:    #e8884a;   /* salvage type */
  --jade:      #5dd9b5;   /* cargo haul type */
  --solar:     #ffba2f;   /* refining / raw */
  --plasma:    #b894ff;   /* ready · collect (lavender) */
  --aurora:    #7aa8ff;   /* open · awaiting sale */
  --green:     #4ee5a4;   /* sold / paid / net+ */
  --red:       #ff5c4a;   /* failure / destructive */

  /* Legacy aliases — kept so older rules continue to work */
  --amber:     var(--solar);
  --violet:    var(--plasma);
  --cyan-soft: #1899c2;
  --amber-soft:#c97612;
  --violet-soft:#c0398a;
  --green-soft:#27a674;
  --red-soft:  #c8341f;

  /* ── Semantic role tokens (preferred for new code) ── */
  --t-mining:  var(--cyan);
  --t-salvage: var(--copper);
  --t-cargo:   var(--jade);

  --s-planning:  var(--text-mute);
  --s-refining:  var(--solar);
  --s-ready:     var(--plasma);
  --s-open:      var(--aurora);
  --s-sold:      var(--green);
  --s-failed:    var(--red);

  /* Type */
  --display: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Radii */
  --r-tight: 2px;
  --r-base:  3px;
  --r-card:  4px;
  --r-pill:  999px;

  /* Density — Tweaks panel can swap these */
  --row-h:    44px;
  --pad-x:    18px;
  --section-pad: 14px;
}

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-glow); background-clip: padding-box; border: 2px solid transparent; }

/* Utilities used everywhere */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.dim { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.ghost { color: var(--text-ghost); }
.amber { color: var(--amber); }
.cyan { color: var(--cyan); }
.violet { color: var(--violet); }
.green { color: var(--green); }
.red { color: var(--red); }

/* Common chrome */
.k-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-tight);
  padding: 5px 11px;
  font: 600 10.5px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.k-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.k-btn.primary { border-color: var(--cyan); color: var(--cyan); background: rgba(54,210,255,0.06); }
.k-btn.primary:hover { background: rgba(54,210,255,0.16); }
.k-btn.amber { border-color: var(--amber); color: var(--amber); background: rgba(255,165,61,0.06); }
.k-btn.amber:hover { background: rgba(255,165,61,0.16); }
.k-btn.violet { border-color: var(--violet); color: var(--violet); background: rgba(176,139,255,0.06); }
.k-btn.green { border-color: var(--green); color: var(--green); background: rgba(78,229,164,0.06); }
.k-btn.danger { border-color: rgba(255,92,74,0.45); color: var(--red); }
.k-btn.danger:hover { background: rgba(255,92,74,0.10); }
.k-btn.ghost { border-color: transparent; }
.k-btn.ghost:hover { border-color: var(--line); color: var(--cyan); }

.k-input {
  font: 400 13px var(--display);
  background: var(--bg-0);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-tight);
  padding: 5px 9px;
  outline: none;
}
.k-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.k-input.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* State chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 8px;
  font: 600 10px var(--display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--r-tight);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--text-dim);
  white-space: nowrap;
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.chip.cyan    { color: var(--cyan);   border-color: rgba(54,210,255,0.45);  background: rgba(54,210,255,0.08); }
.chip.copper  { color: var(--copper); border-color: rgba(232,136,74,0.5);   background: rgba(232,136,74,0.08); }
.chip.jade    { color: var(--jade);   border-color: rgba(93,217,181,0.5);   background: rgba(93,217,181,0.08); }
.chip.solar   { color: var(--solar);  border-color: rgba(255,186,47,0.5);   background: rgba(255,186,47,0.08); }
.chip.plasma  { color: var(--plasma); border-color: rgba(184,148,255,0.5);  background: rgba(184,148,255,0.08); }
.chip.aurora  { color: var(--aurora); border-color: rgba(122,168,255,0.5);  background: rgba(122,168,255,0.08); }
.chip.amber   { color: var(--solar);  border-color: rgba(255,186,47,0.5);   background: rgba(255,186,47,0.08); }
.chip.violet  { color: var(--plasma); border-color: rgba(184,148,255,0.55); background: rgba(184,148,255,0.08); }
.chip.green   { color: var(--green);  border-color: rgba(78,229,164,0.45);  background: rgba(78,229,164,0.08); }
.chip.red     { color: var(--red);    border-color: rgba(255,92,74,0.5);    background: rgba(255,92,74,0.08); }
.chip.dim     { color: var(--text-mute); border-color: var(--line); background: rgba(255,255,255,0.02); }
.chip.solid.amber  { background: var(--solar);  color: #1a1208; border-color: var(--solar); }
.chip.solid.green  { background: var(--green);  color: #03241a; border-color: var(--green); }
.chip.solid.violet { background: var(--plasma); color: #1c0b3a; border-color: var(--plasma); }
.chip.solid.cyan   { background: var(--cyan);   color: #002231; border-color: var(--cyan); }
.chip.solid .dot { background: currentColor; box-shadow: none; opacity: 0.7; }

/* Tag (smaller chip, used in haul item / sales metadata) */
.tag {
  display: inline-block;
  padding: 1px 6px;
  font: 600 9px var(--display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--r-tight);
  color: var(--text-mute);
}
.tag.cyan { color: var(--cyan); border-color: rgba(54,210,255,0.45); background: rgba(54,210,255,0.08); }
.tag.amber { color: var(--amber); border-color: rgba(255,165,61,0.45); background: rgba(255,165,61,0.06); }
.tag.green { color: var(--green); border-color: rgba(78,229,164,0.45); background: rgba(78,229,164,0.06); }

/* Brand mark — non-trademarked geometric glyph */
.brandmark {
  display: inline-block;
  width: 18px; height: 18px;
  position: relative;
  flex-shrink: 0;
}
.brandmark::before, .brandmark::after {
  content: "";
  position: absolute; inset: 0;
  border: 1.5px solid var(--cyan);
  border-radius: 1px;
}
.brandmark::before { transform: rotate(45deg); opacity: 0.5; }
.brandmark::after  { transform: scale(0.6) rotate(45deg); background: var(--cyan); border: none; }