/* ============================================================
   Cause List — design tokens. THE source of truth for the web.

   Copied from app/lib/theme/app_theme.dart, which is what the phone actually
   ships. Note that DESIGN.md's colour and type tables have drifted from the
   code (they still say navy #1E3A5F and Roboto); where they disagree, the
   Dart file wins, because that is what a user sees.

   Every web surface loads this file, so the console and the advocates' site
   cannot drift apart. Because they live on different domains, each host needs
   its own physical copy — this IS that copy for the admin console, and it must
   stay byte-identical to `web/shared/tokens.css`, which is the original.
   Change one, change both.
   ============================================================ */

:root {
  /* ---------- colour ----------
     One accent (navy). Green marks a posted court result and nothing else.
     Red is sacred: lapsing orders and destructive actions only. */
  --ink: #16181D;          /* primary text, high contrast          */
  --slate: #667085;        /* secondary text, metadata             */
  --paper: #FFFFFF;        /* card surface                         */
  --mist: #F9F9F8;         /* screen background, grouped sections  */
  --hairline: #E6E6E3;     /* 1px card and divider borders         */
  --navy: #1E3A8A;         /* primary actions, active states       */
  --navy-tint: #EAEEF9;    /* selected chips, count pills          */
  --amber: #B45309;        /* "list not published yet"             */
  --amber-tint: #FDF3E1;
  --grey: #6B7280;         /* "not listed", empty-group counts     */
  --grey-tint: #F2F3F5;
  --success: #166534;      /* a posted result ONLY                 */
  --success-tint: #E7F0EA;
  --danger: #B91C1C;       /* order expiry, destructive ONLY       */
  --danger-tint: #FCEBEA;

  /* Borders that need to carry a status without a fill. */
  --amber-line: #E9D6AE;
  --danger-line: #F0CFCE;
  --navy-line: #C9D6EF;

  /* ---------- type ----------
     Manrope throughout, matching the app. It is a variable font, so weights
     are pinned explicitly rather than left to the browser to synthesise. */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display: 34px;   /* serial numbers — the one place w800 is earned */
  --t-headline: 22px;
  --t-title: 16px;
  --t-body: 14px;
  --t-label: 13px;
  --t-caption: 12px;

  /* ---------- shape and space ----------
     4px grid. Borders over shadows — sleekness comes from spacing and type,
     not effects. */
  --r-card: 14px;
  --r-btn: 12px;
  --r-input: 8px;
  --r-chip: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
}