/* =========================================================================
   Compatibility bridge — maps the pre-redesign class/token vocabulary used by
   existing console templates onto the dark design system, so every page renders
   cohesively without rewriting each one at once. New templates use the design's
   own classes (.card, .table, .btn, .status, .chip) and are unaffected because
   every legacy rule below is scoped to NOT touch those.
   ========================================================================= */

:root {
  --line: var(--rule);
  --muted: var(--fg-3);
  --fg: var(--fg-1);
  --bg: var(--cream-200);
  --green: var(--folio-green-700);
  --yellow: var(--parchment-700);
  --red: var(--bindery-red-500);
}

/* Legacy bare tables (old templates use <table><th><td> without .table). */
.page table:not(.table) { width: 100%; border-collapse: collapse; font-size: 13px; }
.page table:not(.table) th {
  text-align: left; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500; padding: 10px 12px;
  border-bottom: 1px solid var(--rule); background: var(--cream-100);
}
.page table:not(.table) td {
  padding: 10px 12px; border-bottom: 1px solid var(--rule-subtle); color: var(--fg-1);
}

/* Legacy pills -> dark status chips. */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--cream-200);
  color: var(--fg-2); border: 1px solid var(--rule-subtle); }
.pill.green { background: var(--folio-green-100); color: var(--folio-green-900);
  border-color: color-mix(in srgb, var(--folio-green-700) 22%, transparent); }
.pill.yellow { background: var(--parchment-100); color: var(--parchment-700);
  border-color: color-mix(in srgb, var(--parchment-700) 30%, transparent); }
.pill.red { background: var(--bindery-red-100); color: var(--bindery-red-700);
  border-color: color-mix(in srgb, var(--bindery-red-500) 26%, transparent); }

/* Legacy buttons (bare <button>, .approve, .reject) — not the design's .btn. */
.page button:not(.btn), .page input[type=submit]:not(.btn) {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: var(--radius-md);
  border: 1px solid var(--rule); background: var(--cream-50);
  color: var(--ink-900); cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
}
.page button:not(.btn):hover { background: var(--cream-200); }
.page button.approve, .page .approve {
  background: var(--folio-green-700); color: var(--fg-on-accent); border-color: transparent;
  box-shadow: 0 0 0 1px rgba(47,217,138,0.25), 0 4px 14px rgba(47,217,138,0.16);
}
.page button.approve:hover { background: #46E39C; }
.page button.reject, .page .reject {
  background: var(--cream-50); color: var(--bindery-red-700);
  border-color: color-mix(in srgb, var(--bindery-red-500) 40%, transparent);
}
.page button.reject:hover { background: var(--bindery-red-100); }

/* Legacy form fields. */
.page input:not(.authinput):not(.input):not([type=checkbox]):not([type=radio]),
.page select:not(.input),
.page textarea {
  font-family: var(--font-ui); font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  background: var(--cream-100); color: var(--ink-900);
}
.page input::placeholder, .page textarea::placeholder { color: var(--fg-4); }
.page input:focus, .page select:focus, .page textarea:focus {
  outline: none; border-color: var(--folio-green-700);
  box-shadow: 0 0 0 3px rgba(47,217,138,0.14);
}
.page label { font-size: 13px; color: var(--fg-2); }

/* Legacy stat blocks + helpers. */
.stat { font-family: var(--font-display); font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink-900); }
.stat-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--fg-3); }
.error { color: var(--bindery-red-700); }
.muted { color: var(--fg-3); }

/* Legacy auto-fit grids (only when no explicit grid--N modifier is present). */
.grid:not([class*="grid--"]) { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Legacy headings inside content render in the display face. */
.page h1, .page h2, .page h3 { font-family: var(--font-display); color: var(--ink-900);
  letter-spacing: -0.02em; }
.page h1 { font-size: 26px; font-weight: 500; }
.page h2 { font-size: 18px; font-weight: 500; }
.page h3 { font-size: 15px; font-weight: 600; }
.page a:not(.btn):not(.navitem):not(.navitem__count) { color: var(--folio-green-900); }
.page a:not(.btn):not(.navitem):hover { color: var(--folio-green-700); }

/* Code blocks (evidence, tokens). */
.page code { font-family: var(--font-mono); font-size: 12px; }