/* public/css/app.css — shared design tokens, base reset, and base
   typography. Extracted from the per-view <style> blocks (design cleanup
   item 6) so the palette lives in ONE place. Linked once per page,
   BEFORE the page's own inline <style>, so any page-specific override
   still wins. Update tokens HERE, not per view.

   Header chrome (.brand, .signout, header nav a, …) is intentionally NOT
   here: those rules are partly load-bearing and partly per-view, and the
   module pages never declared them — globalizing would change rendering.
   They remain in each view's inline <style>. */

/* Shared component layer (.btn / .card / .c-table / .banner / .pill / inputs /
   .title …) — defined ONCE in app-components.css so modules stop copying it into
   every view. @import sits ABOVE :root so the component rules load FIRST in
   app.css's cascade, then app.css's own rules, then each view's inline <style>
   (which is later in document order, so a view's still-present copied rule WINS
   on equal specificity → nothing changes on screen yet). Migration slices later
   delete the view copies, at which point the shared layer takes over. Custom
   properties resolve at computed-value time, so the tokens below are available
   to the imported rules despite being declared after the @import. */
@import url('app-components.css');

:root {
  /* Core palette (the original nine — unchanged). */
  --bg: #0f1923;
  --panel: #1c2b3a;
  --panel-2: #16242f;
  --border: #2e4057;
  --text: #e8edf2;
  --muted: #8fa3b8;
  --accent: #f0a500;
  --ok: #3fb950;
  --err: #f85149;

  /* Semantic status colors — the audit found these reinvented as raw literals
     across modules (no token existed). Values are exactly as already shipping,
     so naming them is a zero-visual-change move. */
  --warn:       #f0c050; /* warning / caution text (distinct from brand --accent) */
  --info:       #79b8ff; /* info / pending blue */
  --awaiting:   #14b8a6; /* approval-queue awaiting (teal) */
  --submitted:  #a78bfa; /* workflow in-flight (purple) */
  --ok-text:    #7ee08a; /* the lighter success text (banner/pill) */
  --err-text:   #ff9a93; /* the lighter error text (banner/pill) */

  /* Status tint backgrounds (.12) + borders (.4) — give the 240+ copied
     rgba(...) banner/pill literals one named home. */
  --ok-bg:        rgba(63,185,80,.12);   --ok-border:        rgba(63,185,80,.4);
  --err-bg:       rgba(248,81,73,.12);   --err-border:       rgba(248,81,73,.4);
  --warn-bg:      rgba(240,165,0,.12);   --warn-border:      rgba(240,165,0,.4);
  --info-bg:      rgba(121,184,255,.12); --info-border:      rgba(121,184,255,.4);
  --awaiting-bg:  rgba(20,184,166,.12);  --awaiting-border:  rgba(20,184,166,.4);
  --submitted-bg: rgba(167,139,250,.12); --submitted-border: rgba(167,139,250,.4);

  /* Radii — the raw 7px/10px/20px recurrence is exactly why button/pill
     padding drifted; name the scale. */
  --radius:      7px;  /* buttons, banners, inputs */
  --radius-lg:   10px; /* cards */
  --radius-pill: 20px; /* status pills (store-kit canonical) */
}
* {
  box-sizing: border-box;
}
a {
  color: var(--accent);
  text-decoration: none;
}
/* Anchor buttons (<a class="btn">) — re-assert the button text color UNLAYERED
   so it beats the unlayered `a { color }` above. The shared .btn colors live in
   @layer components (app-components.css), and a layered declaration ALWAYS loses
   to an unlayered one regardless of specificity — so without these, an
   <a class="btn"> would take the amber `a` color (invisible on the amber fill).
   `<button class="btn">` needs nothing here (no `a` rule competes; the layer
   wins). Danger anchors keep their view's `.btn.danger` color (higher
   specificity than a.btn). Non-button links and single-class link colors
   (e.g. .linklike) are untouched — these are scoped to .btn anchors only. */
a.btn       { color: #1a1205; }
a.btn.ghost { color: var(--muted); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow',system-ui,sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Themed scrollbars — GLOBAL. app.css is linked by every /m/* module page and
   every /admin page, so this single block themes every scroll container
   app-wide (content, modals, tables, the sidebar). Firefox: scrollbar-width/
   color on the root; Chromium/WebKit: the ::-webkit-scrollbar pseudo-elements.
   Tokens only — no bespoke colours. (The landing/picker page skips app.css; its
   sidebar scrollbar is themed by the .nav-tree mirror in nav-tree.css.) */
html { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
  border: 2px solid var(--bg); /* inset so the thumb reads slimmer */
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: var(--bg); }