/* ============================================================
   Northwind theme — design tokens + self-hosted IBM Plex.
   Linked (with app.css) only on in-scope web-UI pages, never on
   the 63 print/PDF document templates. All base wiring that could
   affect inherited layout lives in app.css under body.app-ui — this
   file only DECLARES tokens/fonts and the opt-in .num utility, so
   including it is inert until a page also carries the app-ui class.
   Tokens verified against docs/FRONTEND_THEME_AUDIT.md §8.
   ============================================================ */

/* ---- Self-hosted IBM Plex (woff2 under /static/fonts) ---- */
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("/static/fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/static/fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/static/fonts/ibm-plex-sans-latin-700.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/static/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("/static/fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); }

:root {
  /* ---- Type ---- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Monaco, "Courier New", monospace;
  --fs-micro: 10px; --fs-th: 10.5px; --fs-delta: 11.5px; --fs-sm: 12px;
  --fs-body: 12.5px; --fs-base: 13px; --fs-btn: 14px;
  --fs-rail-val: 17px; --fs-h1: 21px; --fs-kpi: 23px;
  --fs-page-title: 16px; /* compact page-header title (Phase 9e) */
  --lh-base: 1.45; --ls-tight: -0.01em; --ls-caps: 0.06em;
  --ls-caps-table: 0.04em; --ls-caps-nav: 0.08em;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  /* ---- Accent (default navy; swap via [data-accent]) ---- */
  --accent: #1b4965; --accent-hover: #173f57; --accent-fg: #ffffff;
  --accent-tint-07: rgba(27, 73, 101, 0.07);  /* selected row */
  --accent-tint-11: rgba(27, 73, 101, 0.11);  /* active nav (light) */
  --accent-tint-22: rgba(27, 73, 101, 0.22);  /* active filter-tab border */

  /* ---- Neutral palette ---- */
  --bg-app: #f6f7f9; --surface: #ffffff; --surface-faint: #fbfcfd;
  --appbar-switcher-hover: #eef0f3; --appbar-icon-stroke: #aab1bb;
  --border-1: #e8eaed; --border-2: #eceef1; --border-3: #eef0f2; --border-4: #f1f3f5; --border-5: #f4f5f7;
  --color-border: var(--border-1); --row-hover: #f7f8fa;

  /* ---- Text hierarchy ---- */
  --text-strong: #141a21; --text-body: #1a2027; --text-cell: #1c232b;
  --text-2: #3f4c5e; --text-3: #5b6470; --text-muted: #5f6772;
  --text-light: #646b76; --text-hint: #6b727d;

  /* ---- Sidebar (light default; [data-nav="dark"] overrides) ---- */
  --side-bg: #ffffff; --side-fg: #1a2027; --side-muted: #646b76;
  --side-border: #eceef1; --side-active: var(--accent-tint-11); --side-active-fg: var(--accent);
  --side-hover: rgba(26, 32, 39, 0.05);

  /* ---- Status tokens (text / bg / border) ---- */
  --st-active-fg: #15803d;  --st-active-bg: #ecf7f0;  --st-active-bd: #cfe9d8;
  --st-pending-fg: #9a6700; --st-pending-bg: #fbf2e0; --st-pending-bd: #efddb5;
  --st-expiring-fg: #c2410c;--st-expiring-bg: #fcefe7;--st-expiring-bd: #f4d7c4;
  --st-renewal-fg: #1d4ed8; --st-renewal-bg: #ecf0fd; --st-renewal-bd: #d2def9;
  --st-executed-fg: #475569;--st-executed-bg: #eef1f5;--st-executed-bd: #dde3ea;
  --st-draft-fg: #64748b;   --st-draft-bg: #f1f3f6;   --st-draft-bd: #e3e8ee;

  /* ---- Radii / borders / shadows ---- */
  --r-badge: 4px; --r-btn: 6px; --r-search: 7px; --r-card: 9px; --r-pill: 999px;
  --bw: 1px;
  --shadow-sm: 0 1px 2px rgba(20, 26, 33, 0.04);
  --shadow-md: 0 4px 14px rgba(20, 26, 33, 0.08);

  /* ---- Layout metrics ---- */
  --h-header: 52px; --w-sidebar: 240px; --w-rail: 320px;
  --h-th: 36px; --h-nav-item: 31px; --h-tab: 30px; --h-search: 32px;
  --row-h: 38px; /* density: compact (default) */
}

/* Accent variants */
:root[data-accent="sage"]     { --accent:#2f5d4f; --accent-hover:#285044; --accent-tint-07:rgba(47,93,79,.07);  --accent-tint-11:rgba(47,93,79,.11);  --accent-tint-22:rgba(47,93,79,.22); }
:root[data-accent="charcoal"] { --accent:#2b3440; --accent-hover:#252d37; --accent-tint-07:rgba(43,52,64,.07);  --accent-tint-11:rgba(43,52,64,.11);  --accent-tint-22:rgba(43,52,64,.22); }
:root[data-accent="rust"]     { --accent:#7a5230; --accent-hover:#694729; --accent-tint-07:rgba(122,82,48,.07); --accent-tint-11:rgba(122,82,48,.11); --accent-tint-22:rgba(122,82,48,.22); }

/* Dark sidebar variant */
:root[data-nav="dark"] {
  --side-bg:#13181f; --side-fg:#e8ebef; --side-muted:#838d9b;
  --side-border:#222a34; --side-active:rgba(255,255,255,.07); --side-active-fg:#ffffff;
  --side-hover:rgba(255,255,255,.05);
}

/* Density variant */
:root[data-density="comfortable"] { --row-h: 46px; }

/* Opt-in mono utility (safe globally — only affects elements you add it to) */
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); }