/* ═══════════════════════════════════════════════════════════════════════════
   FineFight V2 — TOKENS (css/tokens.css)

   REUSE MAP — every block below is a low-level primitive ported from V1 after
   the R1 audit of ui/styles.css · ui/css/*.css · ui/assets. Nothing here is a
   page composition, a surf-*.js behaviour, or a wholesale copied file.

   | block                | ported from                          | why            |
   |----------------------|--------------------------------------|----------------|
   | colour ramps         | ui/styles.css:19-79   (:root)        | one palette, no product colour invented |
   | shadows              | ui/styles.css:82-85                  | elevation vocabulary |
   | fonts / type scale   | ui/styles.css:88-102                 | typography tokens |
   | radii / containers   | ui/styles.css:104-113                | geometry tokens |
   | density scales       | ui/styles.css:116-141                | role density (data-density) |
   | reset + base type    | ui/styles.css:143-166                | shared baseline |
   | layout utilities     | ui/styles.css:523-532                | row/col/gap/margin utilities |
   | icon set (SVG paths) | ui/js/icons.js:1-254                 | one inline-SVG source of truth |
   | brand mark           | ui/assets/finefight-mark.svg (slot)   | asset slot — see below |

   NOT ported (deliberately): lab-bar inspector chrome (ui/styles.css:171+,
   "not part of the product"), .btn/.badge/.card/.banner component families,
   every surf-*.css composition, all surf-*.js render functions. Those belong
   to the role-seam task and must be rebuilt against these tokens.

   ASSET SLOT — ui-v2/assets/ intentionally has no image yet. The V1 mark
   (ui/assets/finefight-mark.svg) is copied only when the Public seam needs it;
   until then the shell uses the code-native .brand-mark below.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — colour ramps (source: ui/styles.css:19-79) — */
  --ink-50: #f5f4f0;   --ink-100: #e9e7e1;  --ink-150: #dedbd3;  --ink-200: #d7d4cb;
  --ink-300: #b9b5aa;  --ink-400: #85827c;  --ink-500: #626563;  --ink-600: #454b4e;
  --ink-700: #303a40;  --ink-800: #202e36;  --ink-900: #14242c;  --ink-950: #0c181e;

  --brass-50: #fcf8ea; --brass-100: #f6edcc; --brass-200: #ead79a; --brass-300: #d7bb64;
  --brass-400: #bd9638; --brass-500: #9a7625; --brass-600: #795b1b; --brass-700: #5d4516;
  --brass-800: #463410;

  --pos-50: #edf7f0; --pos-100: #d3ebd9; --pos-200: #a8d6b6;
  --pos-500: #2d7a52; --pos-600: #21613f; --pos-700: #184b31;

  --cau-50: #fff8e5; --cau-100: #f9e9b8; --cau-200: #f0d686;
  --cau-500: #b77913; --cau-600: #925c0e; --cau-700: #70450d;

  --crit-50: #fff1ed; --crit-100: #fbd9d1; --crit-200: #f3bdb0;
  --crit-500: #c94e3d; --crit-600: #a83d30; --crit-700: #813027;

  --info-50: #edf5fa; --info-100: #d5e6f1; --info-200: #b3d2e6;
  --info-500: #3475a1; --info-600: #285d82; --info-700: #204967;

  --s0: #fffef9; --s1: #f8f5ed; --s2: #f0ece1; --s3: #e7e1d4;
  --line-soft: #e4ded1; --line: #d5cdbd; --line-2: #bfb5a3;

  /* — elevation (source: ui/styles.css:82-85) — */
  --sh-card: 0 1px 1px rgb(20 36 44 / 0.03), 0 7px 18px -16px rgb(20 36 44 / 0.24);
  --sh-overlay: 0 2px 4px rgb(20 36 44 / 0.05), 0 22px 48px -18px rgb(20 36 44 / 0.28);
  --sh-float: 0 2px 4px rgb(20 36 44 / 0.05), 0 12px 28px -12px rgb(20 36 44 / 0.22);
  --sh-sticky: 0 -1px 0 rgb(20 36 44 / 0.08), 0 -10px 26px -18px rgb(20 36 44 / 0.22);

  /* — typography (source: ui/styles.css:88-102) — */
  --f-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: Fraunces, ui-serif, Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-2xs: 10.5px; --t-xs: 11.5px; --t-sm: 12.5px; --t-md: 13.5px;
  --t-base: 14.5px; --t-lg: 16px; --t-xl: 19px; --t-2xl: 23px;
  --t-3xl: 29px; --t-4xl: 38px; --t-5xl: 52px;

  /* — geometry (source: ui/styles.css:104-113) — */
  --r-xs: 5px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;
  --container: 1180px; --container-wide: 1420px;

  /* — density (source: ui/styles.css:116-141) — role-driven spacing scale — */
  --d-card: 1.25rem; --d-sec: 2.25rem; --d-row: 0.9375rem;
  --d-gap: 1rem; --d-r: var(--r-md); --d-max: var(--container);
}

[data-density="attorney"] {
  --d-card: 1rem; --d-sec: 1.75rem; --d-row: 0.75rem;
  --d-gap: 0.875rem; --d-r: var(--r-sm); --d-max: var(--container-wide);
}
[data-density="admin"] {
  --d-card: 0.875rem; --d-sec: 1.25rem; --d-row: 0.5rem;
  --d-gap: 0.75rem; --d-r: 6px; --d-max: none;
}

/* — responsive targets (R1 brief): 390 phone · 768 tablet · 1440 desktop — */
:root { --vp-phone: 390px; --vp-tablet: 768px; --vp-desktop: 1440px; }

/* ═══ reset + base (source: ui/styles.css:143-166) ═══════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--s1);
  color: var(--ink-900);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--brass-500); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brass-200); color: var(--ink-950); }
.ico { flex: none; display: block; }
.tnum, .num { font-variant-numeric: tabular-nums; }

/* ═══ layout utilities (source: ui/styles.css:523-532) ═══════════════════ */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.g-1 { gap: 4px; } .g-2 { gap: 8px; } .g-3 { gap: 12px; } .g-4 { gap: 16px; } .g-5 { gap: 24px; } .g-6 { gap: 32px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; } .mt-6 { margin-top: 32px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; } .mb-6 { margin-bottom: 32px; }
.ml-auto { margin-left: auto; }
.muted { color: var(--ink-500); }
.t-xs { font-size: var(--t-xs); } .t-sm { font-size: var(--t-sm); } .t-md { font-size: var(--t-md); }
.eyebrow { font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; }

/* ═══ code-native brand mark (asset slot — see header) ═══════════════════ */
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(155deg, var(--brass-300), var(--brass-600));
  color: #1b1408; font-weight: 700; font-size: 11.5px; letter-spacing: -.02em;
}