/* BJG Hub — shared design system (the SAME CSS the hub Components page uses).
   Load it LAST in <head> so it wins over a page's own primitives. Covers the shared
   primitives only (tokens, fonts, tables, inputs, buttons); page-specific layout stays per page. */
:root{
  --ink:#17150f; --ink-soft:#403a2c; --paper:#f1e6cf; --panel:#faf3e2; --panel-2:#fbf7ec; --flame:#ffcf23;
}
body{ font-family:"Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color:var(--ink); background:var(--paper); font-size:15px; }
h1,h2,h3,h4{ font-family:"Fraunces", Georgia, serif; font-weight:900; letter-spacing:-0.01em; } /* color inherits — don't force it (sidebar/dark contexts keep their own) */

/* Tables — dark ink header, thick border, hard offset shadow, cells centred vertically */
table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:2.5px solid var(--ink); border-radius:12px; box-shadow:4px 4px 0 var(--ink); font-size:14px; }
th{ background:var(--ink); color:var(--paper); text-align:left; padding:10px 12px; font-size:12.5px; font-weight:800; letter-spacing:.02em; }
td{ padding:9px 12px; border-top:1.5px solid rgba(23,21,15,.14); border-bottom:none; vertical-align:middle; }
thead th{ border-bottom:none; }
tbody tr:nth-child(odd) td{ background:transparent; }
tbody tr:nth-child(even) td{ background:rgba(23,21,15,.04); }
tbody tr:hover td{ background:rgba(232,116,31,.09); }
td.num, th.num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Inputs / selects — 2px ink border, rounded, warm panel, flame focus */
input[type=number],input[type=text],input[type=date],select,textarea{
  font-family:inherit; font-size:14px; border:2px solid var(--ink); border-radius:8px; padding:7px 9px; background:var(--panel-2); font-weight:600; color:var(--ink); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--flame); box-shadow:0 0 0 2px rgba(232,116,31,.18); }

/* Buttons — pills (ghost = panel + ink border; primary = ink fill + flame shadow) */
button,.btn{ font-family:inherit; font-weight:800; font-size:13px; border:2.5px solid var(--ink); background:var(--panel-2); color:var(--ink); padding:8px 15px; border-radius:999px; box-shadow:2px 2px 0 rgba(23,21,15,.16); cursor:pointer; text-decoration:none; }
button:hover,.btn:hover{ background:#ffffff; }
button:active,.btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(23,21,15,.16); }
button.primary,.btn.primary{ background:var(--ink); color:var(--paper); box-shadow:2px 2px 0 var(--flame); }
button.primary:hover,.btn.primary:hover{ background:#241f16; }