/* Design foundation — THE token source. The first 140 lines of the Parcelvision platform's
   `portal/public/components/design-foundation.css`, copied verbatim: the base palette, the semantic
   aliases, and the dark theme that redefines them under `html.dark`. The component rules below that
   point in the platform file style screens Finance does not have, and are not copied. */
:root{
  --ph-primary: #36255c;
  --ph-violet: #9648ff;
  --ph-turquoise: #07cece;
  --btn-primary: #7036bf;
  --btn-primary-hover: #5e2aa5;

  --white: #ffffff;
  --grey-100: #f6f7f9;
  --grey-200: #e1e6eb;
  --grey-300: #d7d7d7;
  --grey-400: #999999;
  --grey-500: #777777;
  --body: #14141a;

  --tint-lavender: #f5edff;
  --tint-mint: #e9f9f5;
  --tint-amber: #fff4e0;
  --tint-rose: #fde8e8;
  --tint-sky: #e6f3ff;
  --tint-purple-bar: #ece5f7;

  --status-green: #0e8a6c;
  --status-amber: #a35f00;
  --status-red: #c53030;
  --status-blue: #2a5a99;

  --dp-oxford: #34557c;
  --dp-light: #45c1f0;
  --pc-green: #3eb27a;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08);

  --font-body: 'GT Walsheim', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sidebar-w: 245px;
  --shadow-lg: 0 10px 30px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --radius: 6px;
  --radius-sm: 4px;
  --nav-w: 248px;
  --nav-w-collapsed: 60px;   /* slim icon rail when the sidebar is collapsed */
  --app-gutter: 0px;    /* nav + scenario box sit flush to the left border */
  --content-inset: 58px; /* gap between the nav menu bar and the page content frames (~1.5cm) */
}

/* Backwards compat aliases for existing styles */
:root{
  --bg: var(--grey-100);
  --surface: var(--white);
  --surface-2: var(--grey-100);
  --ctl: var(--white);   /* control background (light mode = white; dark mode overrides to a lighter-than-panel shade) */
  --border: var(--grey-200);

  /* **The outline on a segmented control, and it is NOT `--border`.**
     `HANDOVER-USERS-ROLES-TEAMS.md` §7: `--border` measures 1.3:1 in dark, *"which is not an
     outline"*. `--ctl-line` is measured at 3.37:1 light and 3.55:1 dark against the panel behind
     it, clearing WCAG 1.4.11's 3:1 for a control boundary. Every toggle uses it, so they match.
     Ported from `roger-prototypes · src/index.css` — without it every `border-ctl-line` in the
     Roles tab fell back to the default border colour and drew a hard white box. Roger, 2026-08-09:
     *"very white outlines around them, and they all look very odd."* */
  --ctl-line: #8f7fae;
  --border-strong: var(--grey-300);
  --text: var(--body);
  /* **Secondary ink, and it has to be READABLE — measured, not judged by eye.**

     These were `--grey-500` (#777) and `--grey-400` (#999), which measure 4.18:1 and **2.66:1**
     against `--surface-2`. 2.66 is not a near-miss; WCAG AA for body text is 4.5:1 and every one of
     the 1,312 `text-ink-soft` call sites in the portal was under it. Roger, 2026-08-09, on the
     surcharge screen: *"the labels are almost unreadable."* He was reading dark mode, where the old
     `#948fab` measured 5.68:1 — passing on paper and still washed out at 14px in a geometric
     typeface, because a ratio that clears the bar for a paragraph does not clear it for a lone
     column header.

     The two are kept a full step apart so the hierarchy survives: `--text-muted` is secondary
     content meant to be read (column headers, row meta), `--text-soft` is de-emphasised. Measured
     against `--surface-2`, which is the least favourable background either sits on:

       light  muted #55555f 6.6:1   soft #6f6f7b 4.7:1
       dark   muted #c9c4da 10.9:1  soft #a8a2c0 7.5:1

     `scripts/shot.mjs --contrast` prints these; re-run it before changing either. */
  --text-muted: #55555f;
  --text-soft: #6f6f7b;
  --accent: var(--btn-primary);
  --accent-soft: var(--tint-lavender);
  --accent-strong: var(--btn-primary-hover);
  --success: var(--status-green);
  --success-soft: var(--tint-mint);
  --warn: var(--status-amber);
  /* **What can be READ on `--warn`.** The fill flips per theme — #a35f00 in light, #e6b45c in dark
     — so a fixed `text-white` on it measured 4.1:1 in one theme and 1.9:1 in the other. Found by
     the contrast sweep on 2026-08-27 on a "3 missing" badge; there are eight `bg-warn text-white`
     pairs in the app and every one of them had the same problem in dark.

     The LIGHT fill moved with it, from #b76b00 to #a35f00: white on the old one was 4.10:1, so
     `--on-warn: #ffffff` would have been a fail I introduced while fixing the dark one. 5.01:1 now,
     and still unmistakably amber. Codex, same review. */
  --on-warn: #ffffff;
  --warn-soft: var(--tint-amber);
  --danger: var(--status-red);
  --danger-soft: var(--tint-rose);
  --info: var(--status-blue);
  --info-soft: var(--tint-sky);
  --neutral-soft: var(--grey-100);
  --shadow: var(--shadow-card);
}
/* ===== Dark theme — redefine the semantic + base tokens (never shim over literal hexes). Toggled by
   html.dark via the theme control; persisted in localStorage; applied pre-render so there is no flash. ===== */
html.dark{
  /* base palette flipped → every semantic alias AND direct var(--grey-*) use follows */
  --grey-100:#17131f; --grey-200:#2b2739; --grey-300:#3a3550; --grey-400:#8b86a0; --grey-500:#a9a4bd;
  --body:#f1eff7;
  /* semantic tokens tuned for dark contrast */
  --bg:#0f0d17; --surface:#1a1725; --surface-2:#141120;
  --ctl:#2b2542;   /* interactive-control background — deliberately LIGHTER than --surface so dropdowns/date-pickers stand out on same-colour panels (dark mode) */
  --border:#2b2739; --border-strong:#3a3550;
  --ctl-line:#75679c;
  --text:#f1eff7; --text-muted:#c9c4da; --text-soft:#a8a2c0;   /* see the note beside the light values */
  --accent:#a78bff; --accent-strong:#bda6ff; --accent-soft:rgba(150,72,255,.18);
  --success:#4cc98a; --success-soft:rgba(76,201,138,.16);
  --warn:#e7a33e;   --warn-soft:rgba(231,163,62,.16);
  --danger:#f0736f; --danger-soft:rgba(240,115,111,.16);
  --info:#7ea0ff;   --info-soft:rgba(126,160,255,.16);
  --neutral-soft:#221d31;
  --ph-violet:#b394ff; --ph-primary:#cbb8ff;
  --tint-lavender:rgba(150,72,255,.20); --tint-mint:rgba(76,201,138,.18); --tint-amber:rgba(231,163,62,.20);
  --tint-rose:rgba(240,115,111,.20); --tint-sky:rgba(126,160,255,.20); --tint-purple-bar:#241f33;
  /* Status INK. The :root values (#2a5a99, #a35f00 …) are light-mode text colours — on a dark panel they
     read as near-invisible (Roger: "the Air pill is in blue, you can hardly see it"). Every --status-* pill
     was affected, so redefine them here as the light-on-dark variants. NB the branded shells below re-scope
     these back to the light values, because those surfaces stay white even in dark mode. */
  --on-warn: #17131f;
  --status-green:#5fd39b; --status-amber:#e6b45c; --status-blue:#8fb2ff; --status-red:#f0938f;
  --shadow-card:0 1px 3px rgba(0,0,0,.45); --shadow-card-hover:0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 10px 30px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4); --shadow:0 1px 3px rgba(0,0,0,.45);
  color-scheme:dark;
}