/* ============================================================================
   tokens.css — design tokens only (colours, type, spacing, radius, shadow)
   Everything else references these variables. Change the brand here once.
   Breakpoints used across the app (min-width, mobile-first):
     • 30rem  (480px)  — large phone
     • 48rem  (768px)  — tablet
     • 64rem  (1024px) — desktop (sidebar appears)
   ========================================================================== */
:root{
  /* brand / ink */
  --ink:#101a2b; --ink-2:#18263c; --steel:#26456b; --steel-lt:#3a5f8a;
  --brass:#9c7b3a; --brass-lt:#c19a4d;

  /* surfaces */
  --paper:#f1f2f4; --surface:#ffffff; --surface-2:#f8f9fb;
  --line:#d7dbe2; --line-strong:#b9c0cc;

  /* text */
  --text:#1e2733; --text-2:#556172; --text-3:#8a94a3;

  /* status */
  --ok:#1f7a4d; --ok-bg:#e6f2ea;
  --warn:#9a6b12; --warn-bg:#f6edd8;
  --danger:#a4302a; --danger-bg:#f6e5e3;

  /* case-type classification colours */
  --crim:#8a2e2a; --civ:#1d5b7a; --fam:#6d4a86; --traf:#1f7a6e;

  /* shape + depth */
  --radius:4px;
  --shadow-sm:0 1px 2px rgba(16,26,43,.08);
  --shadow:0 1px 2px rgba(16,26,43,.06),0 8px 24px rgba(16,26,43,.06);
  --shadow-lg:0 24px 60px rgba(16,26,43,.35);

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* type */
  --font-ui:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-serif:"Spectral",Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,Menlo,Consolas,monospace;

  /* layout metrics */
  --sidebar-w:236px;
  --topbar-h:56px;
  --content-max:1180px;
}