/*
 * mp-tokens.css — Marketplace Prep shared design-token layer (CANONICAL)
 *
 * Single canonical source for every color, radius, spacing, and type token used
 * across the app surfaces: ops, portal, tools, the shipping wallet, RTS, and the
 * web-component chrome. This file lives at sites/shared/mp-tokens.css and is
 * propagated to every per-surface copy by scripts/sync-shared-assets.sh
 * (drift-gated by scripts/check-shared-assets.sh). EDIT ONLY THIS FILE.
 *
 * Embed at document root (not inside a shadow root) so custom properties cascade
 * into every surface and are readable from mp-chrome.js shadow roots via :host.
 *
 *   <link rel="stylesheet" href="/mp-tokens.css">           (surface root)
 *   <link rel="stylesheet" href="/chrome/v2/mp-tokens.css"> (chrome copy)
 *
 * Theme resolution order (highest wins):
 *   1. [data-theme="dark"]  on any ancestor (explicit override)
 *   2. @media (prefers-color-scheme: dark)  (OS preference)
 *   3. [data-theme="light"] on any ancestor (explicit override)
 *   4. :root defaults (light)
 *
 * DESIGN LANGUAGE (ADR 0075 — supersedes the ops-only ADR 0074):
 *   Ground   neutral cool-graphite (NOT teal). Light #eceef1 / dark #12161c.
 *   Chassis  header/footer are a dark graphite bar in BOTH themes (#0d1117).
 *   Type     IBM Plex — Sans (body), Sans Condensed (display), Mono (data).
 *   Accents  ONE meaning per hue:
 *              green #5BAA3B = action / money / healthy   (--mp-primary, --mp-success)
 *              teal  #0e6178 = info / in-motion / booked   (--mp-info)
 *              amber        = caution                      (--mp-warn)
 *              red          = critical                     (--mp-danger)
 *   Retained brand: green #5BAA3B, the hexagon mark.
 *   Overridden platform-wide for app surfaces (owner sign-off, ADR 0075):
 *     Barlow/Roboto -> IBM Plex; teal ground -> neutral graphite.
 *     (The public marketing WordPress site is out of scope — still teal+Barlow.)
 *
 * PRIMITIVES ARE APPEND-ONLY. Surfaces reference some primitives directly
 * (e.g. --mp-prim-green-400 = #5BAA3B, --mp-prim-neutral-*). Never rename or
 * repurpose an existing primitive — add a new one. The design language changes
 * are expressed in the SEMANTIC layer (§2/§3), which remaps to the new
 * graphite/cloud primitives.
 *
 * READABILITY CONTRACT (owner requirement 2026-07-16) — every fg/bg pairing
 * below meets WCAG AA in BOTH themes (>=4.5:1 body, >=3:1 large/UI). Usage rules:
 *   - GREEN as TEXT on a light ground FAILS AA at #5BAA3B — use it only as a
 *     FILL (dark ink --mp-on-primary on it) or, for green text on light, the
 *     darker --mp-primary-dark (#2d7a14, 4.7:1). On dark grounds #5BAA3B passes.
 *   - --mp-fg-faint is ~3:1 by design — decorative / large / disabled only,
 *     NEVER body copy or essential labels. Use --mp-fg-muted for readable
 *     secondary text (>=4.5:1 both themes).
 *   - Text on any accent FILL uses that accent's on-* ink token, never raw fg.
 */

/* ============================================================
   0. FONTS — IBM Plex, self-hosted (CSP font-src 'self')
   Served same-origin at /fonts/ on every surface (sync-managed).
   ============================================================ */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-cond-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-cond-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); }

/* ============================================================
   1. PRIMITIVES  (APPEND-ONLY — never repurpose an existing name)
   ============================================================ */

:root {
  /* -- ORIGINAL primitives (preserved verbatim; surfaces reference these) -- */
  /* Teal scale */
  --mp-prim-teal-950: #00141b;
  --mp-prim-teal-900: #00222d;
  --mp-prim-teal-800: #003040;
  --mp-prim-teal-700: #003d4f;
  --mp-prim-teal-600: #004256;   /* legacy brand teal (marketing site) */
  --mp-prim-teal-500: #0a4f63;
  --mp-prim-teal-400: #0e6178;   /* info accent on light (6.4:1 on white) */
  --mp-prim-teal-300: #1a7c96;

  /* Green scale — green-400 is the CANONICAL brand green #5BAA3B (do not move) */
  --mp-prim-green-900: #1d4d12;
  --mp-prim-green-800: #256010;  /* CTA hover */
  --mp-prim-green-700: #2d7a14;  /* green TEXT on light (4.7:1 — AA) */
  --mp-prim-green-600: #3e7a1f;
  --mp-prim-green-500: #4d9532;
  --mp-prim-green-400: #5BAA3B;  /* CANONICAL brand green — primary FILL */
  --mp-prim-green-300: #72c451;
  --mp-prim-green-200: #8fd971;  /* green accent text on dark */
  --mp-prim-green-100: #c2f0a4;
  --mp-prim-green-50:  #edf9e5;

  /* Neutral scale (warm-ish; retained for back-compat references) */
  --mp-prim-neutral-950: #0b1220;
  --mp-prim-neutral-900: #1a2535;
  --mp-prim-neutral-800: #272626;
  --mp-prim-neutral-700: #3d4451;
  --mp-prim-neutral-600: #4a5765;
  --mp-prim-neutral-500: #5a5a5a;
  --mp-prim-neutral-400: #7a8390;
  --mp-prim-neutral-300: #9fb6bd;
  --mp-prim-neutral-200: #cccfd4;
  --mp-prim-neutral-100: #e3e6ea;
  --mp-prim-neutral-50:  #f4f5f7;
  --mp-prim-white:       #ffffff;

  /* Status */
  --mp-prim-danger-900: #7a1010;
  --mp-prim-danger-600: #b42318;
  --mp-prim-danger-400: #e05252;
  --mp-prim-danger-50:  #fef2f2;
  --mp-prim-warn-600:   #b8851f;
  --mp-prim-warn-50:    #fff9ec;
  --mp-prim-info-600:   #2f5aae;
  --mp-prim-info-50:    #eef4ff;

  /* -- NEW primitives (ADR 0075 — the neutral graphite design language) ---- */
  /* Graphite scale — the dark ground + the chassis (both themes) */
  --mp-prim-graphite-950: #0b0e12;  /* footer / deepest */
  --mp-prim-graphite-900: #0d1117;  /* header/sidebar chassis */
  --mp-prim-graphite-850: #0d1116;  /* recessed well (darker than page) */
  --mp-prim-graphite-800: #12161c;  /* dark page */
  --mp-prim-graphite-700: #171c23;  /* dark subtle */
  --mp-prim-graphite-600: #191f27;  /* dark surface */
  --mp-prim-graphite-500: #262d37;  /* dark line */
  --mp-prim-graphite-400: #333c48;  /* dark line-strong */
  --mp-prim-graphite-300: #5f6b78;  /* dark fg-faint (decorative/large only) */
  --mp-prim-graphite-200: #97a2b0;  /* dark fg-muted (AA) */
  --mp-prim-graphite-100: #e6ebf0;  /* dark fg */

  /* Cloud scale — the light neutral ground (cool graphite-tinted) */
  --mp-prim-cloud-50:  #ffffff;  /* light surface / cards */
  --mp-prim-cloud-100: #f4f5f7;  /* light subtle */
  --mp-prim-cloud-150: #eef0f3;  /* light surface-2 */
  --mp-prim-cloud-200: #eceef1;  /* light page */
  --mp-prim-cloud-300: #e2e5ea;  /* light line */
  --mp-prim-cloud-400: #cfd4db;  /* light line-strong */
  --mp-prim-cloud-500: #8791a0;  /* legacy light fg-faint (kept; failed 3:1 on the page ground) */
  --mp-prim-cloud-550: #767f8c;  /* light fg-faint, AA-safe: >=3:1 on the page ground #eceef1 (3.48) */
  --mp-prim-cloud-600: #55606f;  /* light fg-muted (AA secondary) */
  --mp-prim-cloud-900: #1a2230;  /* light fg (primary ink) */

  /* New accent shades for the neutral system */
  --mp-prim-green-ink: #06270a;  /* dark ink for text ON a green fill */
  --mp-prim-teal-200:  #3aa9c9;  /* info accent on dark (7:1 on graphite) */
  --mp-prim-danger-300: #ff9a8b; /* danger text on dark (~6:1 on graphite) */
  --mp-prim-amber-700: #8a5a00;  /* amber TEXT on light (AA ~5.9:1) */
  --mp-prim-amber-300: #f5c84a;  /* amber on dark (~10:1 on graphite) */
}

/* ============================================================
   2. SEMANTIC TOKENS — LIGHT THEME (default) — neutral cloud ground
   ============================================================ */

:root,
[data-theme="light"] {
  --mp-bg-page:      var(--mp-prim-cloud-200);   /* #eceef1 */
  --mp-bg-subtle:    var(--mp-prim-cloud-100);   /* #f4f5f7 */
  --mp-bg-surface:   var(--mp-prim-cloud-50);    /* #ffffff cards */
  --mp-bg-surface-2: var(--mp-prim-cloud-150);   /* #eef0f3 */
  --mp-bg-overlay:   rgba(13, 17, 23, 0.48);

  --mp-fg:           var(--mp-prim-cloud-900);   /* #1a2230 ~13:1 on white */
  --mp-fg-muted:     var(--mp-prim-cloud-600);   /* #55606f ~5.9:1 */
  --mp-fg-faint:     var(--mp-prim-cloud-550);   /* #767f8c — DECORATIVE, >=3:1 even on the page ground */
  --mp-fg-on-brand:  var(--mp-prim-white);

  --mp-brand-header:  var(--mp-prim-graphite-900);   /* #0d1117 chassis (ALWAYS dark) */
  --mp-brand-footer:  var(--mp-prim-graphite-950);   /* #0b0e12 */
  --mp-brand-deep:    var(--mp-prim-graphite-950);
  /* Sidebar rail FLIPS with the theme (owner decision 2026-07-16): light-gray in
     light, graphite in dark. Only the header stays always-dark chassis. So the
     rail is a CONTENT-context surface — its nav uses the standard --mp-fg*/--mp-line
     tokens, never on-brand. */
  --mp-sidebar-bg:    var(--mp-prim-cloud-100);      /* #f4f5f7 light rail */

  --mp-primary:        var(--mp-prim-green-400);   /* #5BAA3B FILL */
  --mp-primary-dark:   var(--mp-prim-green-700);   /* #2d7a14 green TEXT on light */
  --mp-primary-darker: var(--mp-prim-green-800);   /* #256010 CTA hover */
  --mp-primary-light:  var(--mp-prim-green-200);   /* #8fd971 */
  --mp-primary-tint:   var(--mp-prim-green-50);    /* ghost bg on light */
  --mp-primary-border: rgba(91, 170, 59, 0.30);
  --mp-on-primary:     var(--mp-prim-green-ink);   /* dark ink ON a green fill */

  --mp-on-brand:       var(--mp-prim-white);
  --mp-on-brand-muted: rgba(255, 255, 255, 0.80);
  --mp-on-brand-faint: rgba(255, 255, 255, 0.60);
  --mp-on-brand-dim:   rgba(255, 255, 255, 0.38);

  --mp-line:          var(--mp-prim-cloud-300);   /* #e2e5ea */
  --mp-line-strong:   var(--mp-prim-cloud-400);   /* #cfd4db */
  --mp-line-on-brand: rgba(255, 255, 255, 0.12);
  --mp-line-on-brand-strong: rgba(255, 255, 255, 0.20);

  --mp-interactive-bg:       transparent;
  --mp-interactive-bg-hover: rgba(20, 28, 42, 0.05);
  --mp-interactive-border:   var(--mp-prim-cloud-300);

  /* Neutral overlay scale — subtle resting/hover fills, ghost-button bg, code
     chips. Ink-on-light here; the dark blocks flip it to a white lift so the
     same rule reads correctly on either ground. A surface that was authored
     with a raw rgba(255,255,255,x) "lift" (dark-native modules) maps onto these
     so it stops vanishing in light. Dark alphas are byte-identical to the wallet's
     shipped values (0.03/0.05/0.06/0.10) — do NOT regress that surface. */
  --mp-overlay-1:  rgba(15, 23, 42, 0.03);   /* faint  */
  --mp-overlay-2:  rgba(15, 23, 42, 0.05);   /* soft   */
  --mp-overlay-3:  rgba(15, 23, 42, 0.05);   /* medium */
  --mp-overlay-4:  rgba(15, 23, 42, 0.08);   /* strong */

  --mp-danger:       var(--mp-prim-danger-600);   /* #b42318 ~6.4:1 on white */
  --mp-danger-bg:    var(--mp-prim-danger-50);
  --mp-warn:         var(--mp-prim-amber-700);    /* #8a5a00 ~5.9:1 on white */
  --mp-warn-bg:      var(--mp-prim-warn-50);
  --mp-info:         var(--mp-prim-teal-400);     /* #0e6178 ~6.4:1 on white */
  --mp-info-bg:      #e6f0f3;
  --mp-success:      var(--mp-prim-green-700);    /* green TEXT => darker (AA) */
  --mp-success-fill: var(--mp-prim-green-400);    /* green FILL => brand green */
  --mp-success-bg:   var(--mp-prim-green-50);

  /* Status-ink palette — theme-aware TEXT colors for the freight / inbound status
     boards + client status chips. Each hue keeps its identity for at-a-glance
     scanning but flips value with the pin: darkened here (AA >=4.5:1 on the pills'
     light tint over a white card), light on the dark blocks. Pill BACKGROUNDS stay
     the same low-alpha hue tint (they read on either ground). LIGHT values: */
  --mp-status-green:  #2d7a14;
  --mp-status-amber:  #8a5a00;
  --mp-status-orange: #9a4a00;
  --mp-status-violet: #5a3ea8;
  --mp-status-blue:   #145da8;
  --mp-status-red:    #b42318;
  --mp-status-mint:   #0f7a4a;
  --mp-status-tan:    #8a4b1f;

  /* Status pill BACKGROUNDS — low-alpha hue tints defined ONCE (ground-independent):
     over a white card they read as a pale wash the darkened LIGHT text token sits
     on at AA; over a graphite card they darken and the light DARK text token sits on
     them at AA. Verified by scripts/check-contrast-aa.py in both themes. */
  --mp-status-green-bg:  rgba(91, 170, 59, 0.14);
  --mp-status-amber-bg:  rgba(245, 200, 74, 0.16);
  --mp-status-orange-bg: rgba(245, 140, 60, 0.16);
  --mp-status-violet-bg: rgba(150, 110, 230, 0.16);
  --mp-status-blue-bg:   rgba(60, 150, 225, 0.15);
  --mp-status-red-bg:    rgba(220, 70, 60, 0.15);
  --mp-status-mint-bg:   rgba(35, 175, 120, 0.15);
  --mp-status-tan-bg:    rgba(200, 130, 80, 0.17);

  --mp-focus:        var(--mp-prim-green-700);
}

/* ============================================================
   3. SEMANTIC TOKENS — DARK THEME (neutral graphite ground)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mp-bg-page:      var(--mp-prim-graphite-800);  /* #12161c */
    --mp-bg-subtle:    var(--mp-prim-graphite-700);  /* #171c23 */
    --mp-bg-surface:   var(--mp-prim-graphite-600);  /* #191f27 */
    --mp-bg-surface-2: var(--mp-prim-graphite-850);  /* #0d1116 recessed */
    --mp-bg-overlay:   rgba(0, 0, 0, 0.64);

    --mp-fg:           var(--mp-prim-graphite-100);  /* #e6ebf0 ~13:1 */
    --mp-fg-muted:     var(--mp-prim-graphite-200);  /* #97a2b0 ~7:1 */
    --mp-fg-faint:     var(--mp-prim-graphite-300);  /* #5f6b78 ~3.5:1 DECORATIVE */
    --mp-fg-on-brand:  var(--mp-prim-white);

    --mp-brand-header:  var(--mp-prim-graphite-900);
    --mp-brand-footer:  var(--mp-prim-graphite-950);
    --mp-brand-deep:    var(--mp-prim-graphite-950);
    --mp-sidebar-bg:    var(--mp-prim-graphite-900);   /* #0d1117 dark rail = header */

    --mp-primary:        var(--mp-prim-green-400);
    --mp-primary-dark:   var(--mp-prim-green-700);
    --mp-primary-darker: var(--mp-prim-green-800);
    --mp-primary-light:  var(--mp-prim-green-200);
    --mp-primary-tint:   rgba(91, 170, 59, 0.15);
    --mp-primary-border: rgba(91, 170, 59, 0.34);
    --mp-on-primary:     var(--mp-prim-green-ink);

    --mp-on-brand:       var(--mp-prim-white);
    --mp-on-brand-muted: rgba(255, 255, 255, 0.80);
    --mp-on-brand-faint: rgba(255, 255, 255, 0.60);
    --mp-on-brand-dim:   rgba(255, 255, 255, 0.38);

    --mp-line:          var(--mp-prim-graphite-500);  /* #262d37 */
    --mp-line-strong:   var(--mp-prim-graphite-400);  /* #333c48 */
    --mp-line-on-brand: rgba(255, 255, 255, 0.08);
    --mp-line-on-brand-strong: rgba(255, 255, 255, 0.20);

    --mp-interactive-bg:       transparent;
    --mp-interactive-bg-hover: rgba(255, 255, 255, 0.05);
    --mp-interactive-border:   rgba(255, 255, 255, 0.08);

    /* Overlay scale — white lift on the graphite ground (mirror of the light block). */
    --mp-overlay-1:  rgba(255, 255, 255, 0.03);
    --mp-overlay-2:  rgba(255, 255, 255, 0.05);
    --mp-overlay-3:  rgba(255, 255, 255, 0.06);
    --mp-overlay-4:  rgba(255, 255, 255, 0.10);

    --mp-danger:       var(--mp-prim-danger-300);   /* #ff9a8b ~6:1 on graphite */
    --mp-danger-bg:    rgba(180, 35, 24, 0.18);
    --mp-warn:         var(--mp-prim-amber-300);    /* #f5c84a ~10:1 on graphite */
    --mp-warn-bg:      rgba(165, 114, 15, 0.18);
    --mp-info:         var(--mp-prim-teal-200);     /* #3aa9c9 ~7:1 on graphite */
    --mp-info-bg:      rgba(58, 169, 201, 0.14);
    --mp-success:      var(--mp-prim-green-200);    /* #8fd971 green text on dark */
    --mp-success-fill: var(--mp-prim-green-400);
    --mp-success-bg:   rgba(91, 170, 59, 0.14);

    /* Status-ink palette — DARK values (light hues, AA on the pills' dark tint). */
    --mp-status-green:  #8fd971;
    --mp-status-amber:  #e8c84a;
    --mp-status-orange: #f5a55a;
    --mp-status-violet: #c4aff5;
    --mp-status-blue:   #80bcf0;
    --mp-status-red:    #ff7a70;
    --mp-status-mint:   #6fd39a;
    --mp-status-tan:    #d4956a;

    --mp-focus:        var(--mp-prim-green-200);
  }
}

/* Explicit data-theme="dark" — overrides OS preference. Mirrors the @media block. */
[data-theme="dark"] {
  --mp-bg-page:      var(--mp-prim-graphite-800);
  --mp-bg-subtle:    var(--mp-prim-graphite-700);
  --mp-bg-surface:   var(--mp-prim-graphite-600);
  --mp-bg-surface-2: var(--mp-prim-graphite-850);
  --mp-bg-overlay:   rgba(0, 0, 0, 0.64);

  --mp-fg:           var(--mp-prim-graphite-100);
  --mp-fg-muted:     var(--mp-prim-graphite-200);
  --mp-fg-faint:     var(--mp-prim-graphite-300);
  --mp-fg-on-brand:  var(--mp-prim-white);

  --mp-brand-header:  var(--mp-prim-graphite-900);
  --mp-brand-footer:  var(--mp-prim-graphite-950);
  --mp-brand-deep:    var(--mp-prim-graphite-950);
  --mp-sidebar-bg:    var(--mp-prim-graphite-900);   /* #0d1117 dark rail = header */

  --mp-primary:        var(--mp-prim-green-400);
  --mp-primary-dark:   var(--mp-prim-green-700);
  --mp-primary-darker: var(--mp-prim-green-800);
  --mp-primary-light:  var(--mp-prim-green-200);
  --mp-primary-tint:   rgba(91, 170, 59, 0.15);
  --mp-primary-border: rgba(91, 170, 59, 0.34);
  --mp-on-primary:     var(--mp-prim-green-ink);

  --mp-on-brand:       var(--mp-prim-white);
  --mp-on-brand-muted: rgba(255, 255, 255, 0.80);
  --mp-on-brand-faint: rgba(255, 255, 255, 0.60);
  --mp-on-brand-dim:   rgba(255, 255, 255, 0.38);

  --mp-line:          var(--mp-prim-graphite-500);
  --mp-line-strong:   var(--mp-prim-graphite-400);
  --mp-line-on-brand: rgba(255, 255, 255, 0.08);
  --mp-line-on-brand-strong: rgba(255, 255, 255, 0.20);

  --mp-interactive-bg:       transparent;
  --mp-interactive-bg-hover: rgba(255, 255, 255, 0.05);
  --mp-interactive-border:   rgba(255, 255, 255, 0.08);

  /* Overlay scale — white lift on the graphite ground (mirror of the light block). */
  --mp-overlay-1:  rgba(255, 255, 255, 0.03);
  --mp-overlay-2:  rgba(255, 255, 255, 0.05);
  --mp-overlay-3:  rgba(255, 255, 255, 0.06);
  --mp-overlay-4:  rgba(255, 255, 255, 0.10);

  --mp-danger:       var(--mp-prim-danger-300);
  --mp-danger-bg:    rgba(180, 35, 24, 0.18);
  --mp-warn:         var(--mp-prim-amber-300);
  --mp-warn-bg:      rgba(165, 114, 15, 0.18);
  --mp-info:         var(--mp-prim-teal-200);
  --mp-info-bg:      rgba(58, 169, 201, 0.14);
  --mp-success:      var(--mp-prim-green-200);
  --mp-success-fill: var(--mp-prim-green-400);
  --mp-success-bg:   rgba(91, 170, 59, 0.14);

  /* Status-ink palette — DARK values (explicit [data-theme="dark"] mirror). */
  --mp-status-green:  #8fd971;
  --mp-status-amber:  #e8c84a;
  --mp-status-orange: #f5a55a;
  --mp-status-violet: #c4aff5;
  --mp-status-blue:   #80bcf0;
  --mp-status-red:    #ff7a70;
  --mp-status-mint:   #6fd39a;
  --mp-status-tan:    #d4956a;

  --mp-focus:        var(--mp-prim-green-200);
}

/* ============================================================
   4. RADIUS SCALE
   ============================================================ */

:root {
  --mp-r-xs:      2px;
  --mp-r-sm:      4px;
  --mp-r-ctrl:    6px;   /* inputs, buttons, selects */
  --mp-r-card:    8px;   /* cards, panels, dropdowns */
  --mp-r-modal:  12px;   /* modal sheets */
  --mp-r-lg:     16px;
  --mp-r-xl:     20px;
  --mp-r-pill: 9999px;
}

/* ============================================================
   5. SPACING SCALE — 4-point base grid
   ============================================================ */

:root {
  --mp-sp-1:   4px;
  --mp-sp-2:   8px;
  --mp-sp-3:  12px;
  --mp-sp-4:  16px;
  --mp-sp-5:  20px;
  --mp-sp-6:  24px;
  --mp-sp-8:  32px;
  --mp-sp-10: 40px;
  --mp-sp-12: 48px;
  --mp-sp-16: 64px;
  --mp-sp-20: 80px;
  --mp-sp-24: 96px;
}

/* ============================================================
   6. TYPOGRAPHY SCALE
   ============================================================ */

:root {
  /* Font families — IBM Plex, self-hosted above. Fallbacks are metric-similar. */
  --mp-ff-display: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --mp-ff-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mp-ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --mp-text-xs:   11px;
  --mp-text-sm:   12px;
  --mp-text-base: 15px;
  --mp-text-md:   16px;
  --mp-text-lg:   18px;
  --mp-text-xl:   22px;
  --mp-text-2xl:  28px;
  --mp-text-3xl:  clamp(28px, 3.2vw, 36px);
  --mp-text-4xl:  clamp(32px, 4vw,   44px);
  --mp-text-5xl:  clamp(36px, 4.4vw, 56px);

  --mp-fw-regular:    400;
  --mp-fw-medium:     500;
  --mp-fw-semibold:   600;
  --mp-fw-bold:       700;
  --mp-fw-extrabold:  700;   /* IBM Plex tops at 700; alias kept for callers */

  --mp-lh-tight:  1.1;
  --mp-lh-snug:   1.25;
  --mp-lh-normal: 1.5;
  --mp-lh-relaxed: 1.65;

  --mp-ls-tight:  -0.02em;
  --mp-ls-normal:  0;
  --mp-ls-wide:    0.05em;
  --mp-ls-wider:   0.10em;
}

/* ============================================================
   7. LAYOUT CONSTANTS
   ============================================================ */

:root {
  --mp-container:     1200px;
  --mp-container-lg:  1282px;

  --mp-z-base:    1;
  --mp-z-raised:  10;
  --mp-z-dropdown: 100;
  --mp-z-sticky:  200;
  --mp-z-nav:   9999;
  --mp-z-drawer: 9998;
  --mp-z-scrim:  9997;
  --mp-z-modal: 10000;
}

/* ============================================================
   8. SHADOW SCALE (graphite-tinted)
   ============================================================ */

:root {
  --mp-shadow-xs: 0 1px 2px rgba(11, 14, 18, 0.05);
  --mp-shadow-sm: 0 1px 2px rgba(11, 14, 18, 0.05),
                  0 1px 3px rgba(11, 14, 18, 0.07);
  --mp-shadow-md: 0 4px 12px rgba(11, 14, 18, 0.09),
                  0 2px  4px rgba(11, 14, 18, 0.05);
  --mp-shadow-lg: 0 12px 32px rgba(11, 14, 18, 0.11),
                  0  4px  8px rgba(11, 14, 18, 0.05);
  --mp-shadow-xl: 0 24px 48px rgba(11, 14, 18, 0.16),
                  0  8px 16px rgba(11, 14, 18, 0.07);
  --mp-shadow-stuck: 0 2px 16px rgba(0, 0, 0, 0.20);
  --mp-shadow-nav:   0 8px 24px rgba(0, 0, 0, 0.28);
  --mp-shadow-green: 0 4px 14px rgba(91, 170, 59, 0.34);
}

/* ============================================================
   9. MOTION / EASING
   ============================================================ */

:root {
  --mp-ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --mp-ease-out:    cubic-bezier(0.0,  0.0,  0.2, 1);
  --mp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --mp-dur-fast:   150ms;
  --mp-dur-base:   200ms;
  --mp-dur-slow:   300ms;
  --mp-dur-slower: 400ms;

  --mp-motion:     var(--mp-dur-base) var(--mp-ease);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mp-dur-fast:   1ms;
    --mp-dur-base:   1ms;
    --mp-dur-slow:   1ms;
    --mp-dur-slower: 1ms;
  }
}

/* ============================================================
   10. GLOBAL RESET HOOKS (opt-in via .mp-tokens-reset on <body>)
   ============================================================ */

.mp-tokens-reset {
  box-sizing: border-box;
  margin: 0;
  font-family: var(--mp-ff-body);
  font-size: var(--mp-text-base);
  line-height: var(--mp-lh-normal);
  color: var(--mp-fg);
  background: var(--mp-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mp-tokens-reset *,
.mp-tokens-reset *::before,
.mp-tokens-reset *::after {
  box-sizing: inherit;
}

/* ============================================================
   11. GLOBAL A11Y — WCAG (focus ring, reduced-motion)
   Green focus reads on both the light ground and the dark chassis.
   ============================================================ */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mp-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

.mp-tokens-reset a:focus-visible,
.mp-tokens-reset button:focus-visible,
.mp-tokens-reset [tabindex]:focus-visible {
  outline: 2px solid var(--mp-focus);
  outline-offset: 2px;
}