/* lib-tokens.css — ONE palette for Peep Light and the customer portal.
 *
 * The two shells are built differently on purpose: dispatch is a purged
 * Tailwind build tuned for density, the portal is hand-written CSS tuned for
 * reading. What they must NOT differ on is colour. Before this file the same
 * palette lived twice in two notations — the board wrote `bg-yellow-400` and
 * the portal wrote `#facc15`, the board wrote `bg-emerald-700` for an Ingram
 * band and the portal wrote `#047857` — so adding a customer or nudging a
 * shade meant editing two files and hoping. Everything colour-shaped now
 * resolves here.
 *
 * Load it FIRST in both shells (before Tailwind and before the page's own
 * <style>), so a later rule can still win where a surface genuinely differs.
 *
 * Two groups below:
 *   UI      — surfaces, ink, accent, status. Generic chrome.
 *   DOMAIN  — barge tiles, owner bands, freshness. These encode river
 *             meaning, not taste; changing one changes what a dispatcher
 *             and a customer both understand a barge to be.
 */

:root {
  /* ── UI ──────────────────────────────────────────────────────────── */
  --accent:        #0284c7;
  --accent-soft:   #38bdf8;
  --accent-ink:    #075985;
  --accent-glow:   rgba(2, 132, 199, 0.18);

  --page:          #fafaf9;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --hairline:      rgba(15, 23, 42, 0.08);
  --hairline-firm: #cbd5e1;

  --ink-strong:    #1e293b;
  --ink:           #334155;
  --ink-soft:      #64748b;
  --ink-faint:     #94a3b8;

  --good:          #059669;
  --good-bg:       #ecfdf5;
  --warn:          #b45309;
  --warn-bg:       #fffbeb;
  /* Loud amber for a full-width "you are not looking at your own account"
     bar. Neither of the two above works for that: --warn is ink and --warn-bg
     is a pale wash you can scroll past without noticing, which is the exact
     failure this colour exists to prevent. */
  --warn-bar:      #fbbf24;
  --bad:           #be123c;
  --bad-bg:        #fff1f2;

  --radius:        8px;
  --radius-pill:   99px;

  /* ── DOMAIN: the barge tile ──────────────────────────────────────────
     88×35 with three rows (number / load / owner band), mono 11px bold
     uppercase. The fills are the Tailwind swatches the fleet board has
     always used, named here so both shells can say what they mean.      */
  --tile-w:            88px;
  --tile-h:            35px;
  --tile-font:         ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tile-border:       #cbd5e1;
  --tile-ink:          #0f172a;

  --barge-loaded:      #facc15;   /* yellow-400  */
  --barge-partial-a:   #facc15;   /* the stripe alternates loaded…       */
  --barge-partial-b:   #94a3b8;   /* …with empty, at 45°                 */
  --barge-empty:       #94a3b8;   /* slate-400   */
  --barge-dirty:       #fca5a5;   /* red-300     */
  --barge-select:      #f59e0b;   /* amber selection ring + check badge  */
  /* The D badge is rose-600, which is NOT --bad (a darker rose). Both apps
     have always drawn it this shade; it gets its own token so unifying the
     rule can't quietly restyle it. */
  --tile-dmg:          #e11d48;
  --tile-strip-default: #2563eb;  /* fallback under the boat's own colour */

  /* ── DOMAIN: owner bands ─────────────────────────────────────────────
     The bottom row of a tile wears its owner's colour so a dispatcher can
     read a fleet's ownership mix at a glance, and a customer recognises
     their own hulls. Matched case-insensitively on a substring of the
     owner name, so trailing LLC / Inc. / Co. variants all land.
     ADDING A CUSTOMER: add the token here and the key to BARGE_OWNER_KEYS
     in lib-barge-tile.js — nowhere else.                                */
  --owner-ingram:      #047857;   /* emerald-700 */
  --owner-acbl:        #9333ea;   /* purple-600  */
  --owner-ceres:       #7f1d1d;   /* red-900     */
  --owner-artco:       #2563eb;   /* blue-600    */
  --owner-cci:         #b45309;   /* amber-700   */
  --owner-eastside:    #0891b2;   /* cyan-600    */
  --owner-heartland:   #e11d48;   /* rose-600    */
  --owner-lmr:         #4f46e5;   /* indigo-600  */
  --owner-marquette:   #475569;   /* slate-600   */
  --owner-none:        transparent;
  --owner-none-ink:    #334155;   /* an unlisted owner gets ink, no fill */

  /* ── DOMAIN: destination bands ───────────────────────────────────── */
  --dest-dock:         #047857;
  --dest-fleet:        #4338ca;

  /* ── DOMAIN: freshness ───────────────────────────────────────────────
     How old is the fact you are reading. Born on the River Traffic
     ribbon; the intent is that anything with an age wears the same ramp,
     so "how much do I trust this" reads identically everywhere.         */
  --fresh-1:           #047857;   /* under 6h  */
  --fresh-1-bg:        #ecfdf5;
  --fresh-2:           #b45309;   /* 6–12h     */
  --fresh-2-bg:        #fffbeb;
  --fresh-3:           #c2410c;   /* 12–24h    */
  --fresh-3-bg:        #fff7ed;
  --fresh-4:           #9f1239;   /* over a day */
  --fresh-4-bg:        #fff1f2;
}