/* ERP design tokens + base for every server-rendered page (Quotations, Builder, Deliverables, AI Assistant, Change Orders,
 * Invoice Designer, Patch Manager, Reset MFA, global search, ...). The values are the ones the compiled app uses
 * (Tailwind component classes .btn-primary/.btn-secondary/.input-field/.card/.th-cell/.td-cell in dist/assets/index-*.css),
 * measured with tests/ui/design-probe.py, so a standalone page and a compiled screen look like one product.
 * Page stylesheets use these variables; do not hard-code fonts, radii or the grey/indigo palette in a page. */
:root {
  --erp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --erp-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* type scale (px): xs 12 · sm 14 (body) · md 16 · lg 20 (page title) · xl 24 */
  --erp-fs-2xs: 11px; --erp-fs-xs: 12px; --erp-fs-sm: 14px; --erp-fs-md: 16px; --erp-fs-lg: 20px; --erp-fs-xl: 24px;
  --erp-lh-xs: 16px; --erp-lh-sm: 20px; --erp-lh-md: 24px; --erp-lh-lg: 28px;

  /* colour */
  --erp-ink: #0f172a; --erp-text: #334155; --erp-muted: #64748b; --erp-faint: #94a3b8;
  --erp-line: #e2e8f0; --erp-line-soft: #f1f5f9; --erp-bg: #f8fafc; --erp-surface: #ffffff;
  --erp-primary: #4f46e5; --erp-primary-hover: #4338ca; --erp-primary-soft: #eef2ff;
  --erp-danger: #dc2626; --erp-danger-hover: #b91c1c; --erp-danger-soft: #fef2f2;
  --erp-ok: #16a34a; --erp-ok-dark: #047857; --erp-warn: #d97706; --erp-warn-dark: #b45309;
  --erp-nav-bg: #0f172a; --erp-nav-text: #cbd5e1; --erp-nav-hover: #1e293b;

  /* shape + spacing */
  --erp-radius: 8px; --erp-radius-lg: 12px; --erp-radius-pill: 9999px;
  --erp-pad-btn: 8px 16px; --erp-pad-btn-sm: 4px 10px; --erp-pad-field: 8px 12px; --erp-pad-card: 20px; --erp-gap: 12px;
  --erp-shadow-pop: 0 10px 30px rgba(15, 23, 42, .15);
  --erp-ring: 0 0 0 2px rgba(79, 70, 229, .45);
}

/* ---- base for server-rendered pages (the compiled app brings its own, identical, preflight) ---- */
body:has(.panel-shell), body.erp-page { font-family: var(--erp-font); font-size: var(--erp-fs-sm); line-height: var(--erp-lh-sm); color: var(--erp-ink); background: var(--erp-bg); margin: 0; }
body:has(.panel-shell) :is(button, input, select, textarea, optgroup), body.erp-page :is(button, input, select, textarea, optgroup) { font-family: inherit; }
body:has(.panel-shell) :is(code, kbd, pre, samp), body.erp-page :is(code, kbd, pre, samp) { font-family: var(--erp-mono); }
body:has(.panel-shell) :is(h1, h2, h3, h4), body.erp-page :is(h1, h2, h3, h4) { font-family: inherit; }
/* default heading sizes on the scale (page rules still win: zero specificity) */
:where(body:has(.panel-shell), body.erp-page) :where(h1) { font-size: var(--erp-fs-xl); line-height: var(--erp-lh-lg); }
:where(body:has(.panel-shell), body.erp-page) :where(h2, h3, h4) { font-size: var(--erp-fs-md); line-height: var(--erp-lh-md); }
body:has(.panel-shell) :focus-visible, body.erp-page :focus-visible { outline: 2px solid var(--erp-primary); outline-offset: 2px; }

/* ---- injected widgets that also live inside the compiled app (global search, adjustment bar, AI button) ---- */
.erp-ui-scope, .erp-ui-scope * { font-family: var(--erp-font); box-sizing: border-box; }
.erp-ui-scope :is(code, kbd, pre, samp) { font-family: var(--erp-mono); }