@path58/tokens 1.0.0-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Path58
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# @path58/tokens
+
+Design tokens for the Path58 design system. Single source of truth for color, type, spacing, motion, z-index.
+
+**Status:** 🚧 Stub — populated in DSGN-1.1.2 (Day 2, 2026-06-03) when `colors_and_type.css` migrates from `_path58-brand/tokens/`.
+
+## Exports
+
+- `@path58/tokens/css` — the canonical `tokens.css` (CSS variables)
+- `@path58/tokens` — TS exports of the same values (for non-CSS consumers)
+
+## Token naming
+
+All tokens use the `--p58-*` namespace. Example:
+
+```css
+:root {
+  --p58-bg: #0a0a1a;
+  --p58-accent: #00d4aa;
+  --p58-font-display: 'Space Grotesk', ui-sans-serif, sans-serif;
+}
+```
+
+## See also
+
+- `@path58/themes` — theme files that override these tokens
+- `@path58/ui` — components that read these tokens at runtime

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@path58/tokens",
+  "version": "1.0.0-rc.1",
+  "description": "Path58 design tokens — CSS variables and TS exports for color, type, spacing, motion, z-index. Single source of truth consumed by @path58/themes and @path58/ui.",
+  "type": "module",
+  "main": "./src/tokens.ts",
+  "types": "./src/tokens.ts",
+  "exports": {
+    ".": {
+      "import": "./src/tokens.ts",
+      "types": "./src/tokens.ts"
+    },
+    "./css": "./src/tokens.css",
+    "./tokens.css": "./src/tokens.css"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "license": "MIT",
+  "author": "Path58",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tsvika58/path58-design.git",
+    "directory": "packages/tokens"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "echo 'tokens: no build step — ship src directly' && exit 0",
+    "lint": "echo 'tokens: lint TBD' && exit 0"
+  }
+}

package/src/tokens.css

@@ -0,0 +1,419 @@
+/* =========================================================================
+   Path58 — Design Tokens
+   Dark terminal aesthetic. Serious infrastructure, not startup-cute.
+   ========================================================================= */
+
+/* NOTE: Font-face rules live in @path58/brand-assets/fonts/fonts.css
+   (split out in DSGN-1.1.2). Import that file to load the actual woff2 files. */
+
+:root {
+  /* -------------------------------------------------------------------
+     COLOR — BASE SURFACES
+     ------------------------------------------------------------------- */
+  --p58-bg:            #0a0a1a;  /* canvas / deep background */
+  --p58-surface:       #0e0e24;  /* cards, panels, elevated surfaces */
+  --p58-surface-2:     #14142e;  /* inputs, nested panels */
+  --p58-surface-3:     #1b1b3a;  /* hover / selected row */
+
+  /* -------------------------------------------------------------------
+     COLOR — FOREGROUND (on dark surfaces)
+     ------------------------------------------------------------------- */
+  --p58-fg-1:          #f5f6fb;  /* primary text, headings */
+  --p58-fg-2:          #b8bad0;  /* secondary body text */
+  --p58-fg-3:          #7b7e9c;  /* tertiary / labels / meta */
+  --p58-fg-4:          #4a4d6b;  /* disabled / placeholder */
+
+  /* -------------------------------------------------------------------
+     COLOR — BORDERS & DIVIDERS
+     ------------------------------------------------------------------- */
+  --p58-border:        rgba(255, 255, 255, 0.08);
+  --p58-border-strong: rgba(255, 255, 255, 0.14);
+  --p58-border-subtle: rgba(255, 255, 255, 0.04);
+
+  /* -------------------------------------------------------------------
+     COLOR — ACCENT (terminal teal / brand)
+     `--p58-teal-*` is the canonical p58 accent (data / dev / proof moments),
+     per BRAND_STRATEGY_v2 § Type system implications. `--p58-accent-*` is now
+     an ALIAS of teal — preserved for backwards compatibility. PREFER
+     `--p58-teal-*` in new code; `--p58-accent-*` resolves to the same values.
+     ------------------------------------------------------------------- */
+  --p58-teal:          #00d4aa;  /* primary accent — teal */
+  --p58-teal-hover:    #1ee5bd;  /* hover state */
+  --p58-teal-press:    #00b892;  /* press state */
+  --p58-teal-dim:      #00d4aa22;/* subtle tint fill */
+  --p58-teal-glow:     #00d4aa44;/* glow / ring */
+
+  /* Darker teal text-shift for teal-as-FOREGROUND (text / small UI) on LIGHT
+     surfaces. #00d4aa is only 1.77:1 on the p58-light canvas; this variant is
+     4.90:1 on #f4f6fa (AA body). Mirrors --p58-lime-text-on-light. Components
+     consume it under [data-theme="p58-light"] (per REQ-2026-06-02-007, Option A
+     PM-approved 2026-06-02 — component swap is the follow-on task). */
+  --p58-teal-text-on-light: #007a63;
+
+  /* Text / icon color sitting ON a solid teal fill (e.g. P58Button primary).
+     Dark brand ink, theme-independent — 8.46:1 on teal in ALL themes. Replaces
+     the former `var(--p58-bg)` pattern, which inverted to near-white (1.77:1)
+     on p58-light. Per REQ-2026-06-02-007 (Decision #3 resolution, Option A). */
+  --p58-on-accent:     #0d1d4d;
+
+  /* Theme-dispatched accent foreground. In p58-dark: bright teal. In p58-light:
+     darker teal-text-on-light (REQ-007 Class B / DSGN-1.1.5a). Components consume
+     this for accent text/icons/focus borders so the foreground darkens per theme
+     WITHOUT overriding the brand-locked --p58-teal (AC9/AC11). Tints that use teal
+     inside color-mix() stay on --p58-teal — they are translucent fills, not text. */
+  --p58-accent-fg:     var(--p58-teal);
+
+  --p58-accent:        var(--p58-teal);        /* alias → --p58-teal */
+  --p58-accent-hover:  var(--p58-teal-hover);  /* alias → --p58-teal-hover */
+  --p58-accent-press:  var(--p58-teal-press);  /* alias → --p58-teal-press */
+  --p58-accent-dim:    var(--p58-teal-dim);    /* alias → --p58-teal-dim */
+  --p58-accent-glow:   var(--p58-teal-glow);   /* alias → --p58-teal-glow */
+
+  --p58-icon-accent-soft: color-mix(in srgb, var(--p58-teal) 70%, transparent);
+  /* Soft-icon foreground (IconContainer default variant). On dark, 70%-opacity teal reads as
+     muted cyan glyph — preserves the "soft icon" aesthetic. On p58-light it dispatches to a
+     fully opaque darker teal (see p58-light.css). Per REQ-2026-06-02-008 Option A. */
+
+  /* -------------------------------------------------------------------
+     BRAND COLOR FAMILIES (per BRAND_STRATEGY_v2 § Visual identity)
+     Three secondary accent families woven across the two sub-brands:
+       --p58-blue-*  shared anchor (Path58 + p58). Navy DNA. Surface depth.
+       --p58-lime-*  Path58-only accent — money / revenue moments (rare).
+       --p58-teal-*  p58-only accent — data / dev / proof (defined above).
+     ------------------------------------------------------------------- */
+
+  /* --- BLUE (shared anchor) -------------------------------------------
+     Anchor: --p58-blue-900 = #0d1d4d (Path58 primary text/action navy).
+     Derivation: sRGB linear interpolation from the #0d1d4d anchor toward
+     #ffffff at perceptually-spaced ratios (900=0% → 50=97% white). Light
+     stops are intentionally low-saturation cool-grays with a navy undertone
+     (suits surfaces/borders); a hue-preserving OKLCH ramp is a future option.
+     Method + exact values: evidence/token-extension.md. */
+  --p58-blue-50:  #f8f8fa;
+  --p58-blue-100: #eeeff3;
+  --p58-blue-200: #e0e2e8;
+  --p58-blue-300: #c7cbd6;
+  --p58-blue-400: #adb2c2;
+  --p58-blue-500: #9097ad;
+  --p58-blue-600: #6e7794;
+  --p58-blue-700: #4c587b;
+  --p58-blue-800: #2c3a64;
+  --p58-blue-900: #0d1d4d;  /* anchor — Path58 navy (locked, BRAND_STRATEGY_v2) */
+
+  /* --- LIME (Path58 money/revenue accent — use sparingly, 5-10% by volume) -
+     Locked values from BRAND_STRATEGY_v2 + TASTE_NOTES § Money moments.
+     ⚠ A11Y: --p58-lime-text-on-light (#5e8a23) on #f6f4ee cream = 3.72:1 —
+     passes WCAG AA *large* (≥3:1) but FAILS AA *body* (≥4.5:1). Value is
+     brand-locked; do NOT darken without sign-off. See REQ-2026-06-02-005
+     and evidence/token-extension.md § WCAG. Prefer the wash for body $-figures. */
+  --p58-lime:               #9ab64a;                 /* anchor — muted citrus (fills/data series) */
+  --p58-lime-text-on-light: #5e8a23;                 /* darker text variant (AA-large only — see REQ-005) */
+  --p58-lime-wash:          rgba(154, 182, 74, 0.32);/* highlight wash under money figures */
+  --p58-lime-300:           #c7d79b;                 /* optional — light tint (backgrounds) */
+  --p58-lime-700:           #6c7f34;                 /* optional — deep lime */
+
+  /* -------------------------------------------------------------------
+     COLOR — SEMANTIC
+     ------------------------------------------------------------------- */
+  --p58-success:       #00d4aa;
+  --p58-success-dim:   #00d4aa1a;
+  --p58-warning:       #f5a623;
+  --p58-warning-dim:   #f5a6231a;
+  --p58-danger:        #ff4757;
+  --p58-danger-dim:    #ff47571a;
+  --p58-info:          #5aa9ff;
+  --p58-info-dim:      #5aa9ff1a;
+
+  /* -------------------------------------------------------------------
+     COLOR — TREND / DELTA
+     Teal is the brand accent — do NOT use it as generic "up = good".
+     Most movement is reported neutrally; the number and arrow carry the
+     direction. Red is reserved for unambiguous regressions. Teal is only
+     used when a metric EXPLICITLY beats a baseline (benchmark wins,
+     SLO-over-target).
+     Consumers pick a class based on *context*, not just sign:
+       cost ↓        -> .p58-trend-neutral   (good, but expected)
+       error-rate ↑  -> .p58-trend-negative  (red)
+       pass-rate beats baseline -> .p58-trend-positive (teal, sparingly)
+     ------------------------------------------------------------------- */
+  --p58-trend-neutral:  var(--p58-fg-2);  /* default movement — no value judgement */
+  --p58-trend-muted:    var(--p58-fg-3);  /* meta / "vs baseline" label */
+  --p58-trend-negative: #ff4757;          /* regression — SLO breach, cost spike, error rate up */
+  --p58-trend-positive: var(--p58-accent);/* beats baseline — use sparingly, for wins only */
+
+  /* Additional data-viz accents (harmonized with teal primary) */
+  --p58-viz-1: #00d4aa;
+  --p58-viz-2: #5aa9ff;
+  --p58-viz-3: #c084fc;
+  --p58-viz-4: #f5a623;
+  --p58-viz-5: #ff4757;
+  --p58-viz-6: #7b7e9c;
+
+  /* -------------------------------------------------------------------
+     TYPOGRAPHY — FAMILIES
+     ------------------------------------------------------------------- */
+  --p58-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
+  --p58-font-ui:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --p58-font-mono:    'JetBrains Mono', ui-monospace, 'Menlo', 'Monaco', monospace;
+
+  /* -------------------------------------------------------------------
+     TYPOGRAPHY — SCALE (UI-focused; dense)
+     ------------------------------------------------------------------- */
+  --p58-text-2xs: 10px;
+  --p58-text-xs:  11px;
+  --p58-text-sm:  12px;
+  --p58-text-md:  13px;   /* default body */
+  --p58-text-base:14px;
+  --p58-text-lg:  16px;
+  --p58-text-xl:  20px;
+  --p58-text-2xl: 24px;
+  --p58-text-3xl: 32px;
+  --p58-text-4xl: 40px;
+  --p58-text-5xl: 56px;
+  --p58-text-6xl: 72px;
+
+  /* -------------------------------------------------------------------
+     TYPOGRAPHY — WEIGHTS & LINE HEIGHTS
+     ------------------------------------------------------------------- */
+  --p58-weight-light:   300;
+  --p58-weight-regular: 400;
+  --p58-weight-medium:  500;
+  --p58-weight-semibold:600;
+  --p58-weight-bold:    700;
+
+  --p58-leading-tight:  1.15;
+  --p58-leading-snug:   1.3;
+  --p58-leading-normal: 1.5;
+  --p58-leading-loose:  1.7;
+
+  --p58-tracking-tight:  -0.02em;
+  --p58-tracking-normal: 0;
+  --p58-tracking-wide:   0.04em;
+  --p58-tracking-caps:   0.12em;  /* for uppercase labels */
+
+  /* -------------------------------------------------------------------
+     SPACING (4px baseline)
+     ------------------------------------------------------------------- */
+  --p58-space-0:  0;
+  --p58-space-1:  4px;
+  --p58-space-2:  8px;
+  --p58-space-3:  12px;
+  --p58-space-4:  16px;
+  --p58-space-5:  20px;
+  --p58-space-6:  24px;
+  --p58-space-8:  32px;
+  --p58-space-10: 40px;
+  --p58-space-12: 48px;
+  --p58-space-16: 64px;
+  --p58-space-20: 80px;
+  --p58-space-24: 96px;
+
+  /* -------------------------------------------------------------------
+     RADII — minimal, intentional. Infrastructure ≠ bubbly.
+     ------------------------------------------------------------------- */
+  --p58-radius-none: 0;
+  --p58-radius-sm:   2px;   /* inputs, chips */
+  --p58-radius-md:   4px;   /* buttons, small cards */
+  --p58-radius-lg:   6px;   /* cards, panels */
+  --p58-radius-xl:   10px;  /* modals */
+  --p58-radius-full: 999px; /* pills, avatars */
+
+  /* -------------------------------------------------------------------
+     ELEVATION
+     Dark-on-dark drop shadows disappear. We lift surfaces instead with
+     a color ramp + brighter border. Apply elevation as a pair:
+     background + border. Keep shadow-inset as the shared highlight.
+     ------------------------------------------------------------------- */
+  --p58-elev-1-bg:     #0e0e24;                        /* base — no lift */
+  --p58-elev-1-border: rgba(255, 255, 255, 0.08);
+  --p58-elev-2-bg:     #13132f;                        /* hover / lifted */
+  --p58-elev-2-border: rgba(255, 255, 255, 0.15);
+  --p58-elev-3-bg:     #16163a;                        /* modal / menu */
+  --p58-elev-3-border: rgba(255, 255, 255, 0.22);
+
+  --p58-shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  --p58-glow-accent:   0 0 0 1px var(--p58-accent), 0 0 16px var(--p58-accent-glow);
+  --p58-ring-focus:    0 0 0 2px var(--p58-bg), 0 0 0 4px var(--p58-accent);
+
+  /* -------------------------------------------------------------------
+     MOTION
+     ------------------------------------------------------------------- */
+  --p58-ease:           cubic-bezier(0.2, 0.6, 0.2, 1);
+  --p58-ease-in:        cubic-bezier(0.4, 0, 1, 1);
+  --p58-duration-fast:  120ms;
+  --p58-duration-base:  180ms;
+  --p58-duration-slow:  260ms;
+
+  /* -------------------------------------------------------------------
+     Z-INDEX
+     ------------------------------------------------------------------- */
+  --p58-z-base:    1;
+  --p58-z-sticky:  10;
+  --p58-z-dropdown:100;
+  --p58-z-modal:   1000;
+  --p58-z-toast:   2000;
+
+  /* ─────────────────────────────────────────────────────────────
+   * Third-party brand identity colors
+   * ─────────────────────────────────────────────────────────────
+   * These are upstream tech-logo identity colors used in iconography.
+   * They are NOT Path58 design tokens — they must render as the
+   * upstream brands specify regardless of active theme.
+   *
+   * DO NOT theme-swap these (no light-theme variants, no marketing-
+   * theme variants). DO NOT use them for any element that is not an
+   * official representation of the upstream brand's logo or mark.
+   *
+   * Adding a new third-party brand color: file a REQ documenting
+   * the upstream source (e.g., brand guidelines URL) and the
+   * components that consume it.
+   * ─────────────────────────────────────────────────────────────
+   */
+  --p58-brand-3p-react:        #61DAFB;
+  --p58-brand-3p-react-hover:  #4DD0E1;
+  --p58-brand-3p-html5:        #E34F26;
+  --p58-brand-3p-html5-hover:  #F06529;
+}
+
+/* =========================================================================
+   SEMANTIC ELEMENT STYLES
+   Apply these by using the class or by attaching to real elements.
+   ========================================================================= */
+
+html, body {
+  background: var(--p58-bg);
+  color: var(--p58-fg-1);
+  font-family: var(--p58-font-ui);
+  font-size: var(--p58-text-md);
+  line-height: var(--p58-leading-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Headings — Space Grotesk, tight tracking, tight leading */
+.p58-h1, h1.p58 {
+  font-family: var(--p58-font-display);
+  font-size: var(--p58-text-5xl);
+  font-weight: var(--p58-weight-semibold);
+  line-height: var(--p58-leading-tight);
+  letter-spacing: var(--p58-tracking-tight);
+  color: var(--p58-fg-1);
+}
+.p58-h2, h2.p58 {
+  font-family: var(--p58-font-display);
+  font-size: var(--p58-text-3xl);
+  font-weight: var(--p58-weight-semibold);
+  line-height: var(--p58-leading-tight);
+  letter-spacing: var(--p58-tracking-tight);
+  color: var(--p58-fg-1);
+}
+.p58-h3, h3.p58 {
+  font-family: var(--p58-font-display);
+  font-size: var(--p58-text-2xl);
+  font-weight: var(--p58-weight-medium);
+  line-height: var(--p58-leading-snug);
+  color: var(--p58-fg-1);
+}
+.p58-h4, h4.p58 {
+  font-family: var(--p58-font-display);
+  font-size: var(--p58-text-xl);
+  font-weight: var(--p58-weight-medium);
+  line-height: var(--p58-leading-snug);
+  color: var(--p58-fg-1);
+}
+
+/* Body */
+.p58-body {
+  font-family: var(--p58-font-ui);
+  font-size: var(--p58-text-md);
+  font-weight: var(--p58-weight-regular);
+  line-height: var(--p58-leading-normal);
+  color: var(--p58-fg-2);
+}
+.p58-body-lg {
+  font-family: var(--p58-font-ui);
+  font-size: var(--p58-text-lg);
+  line-height: var(--p58-leading-normal);
+  color: var(--p58-fg-2);
+}
+.p58-small {
+  font-size: var(--p58-text-sm);
+  color: var(--p58-fg-3);
+}
+
+/* Eyebrow / label — uppercase, wide tracking, mono. Classic ops dashboard. */
+.p58-eyebrow {
+  font-family: var(--p58-font-mono);
+  font-size: var(--p58-text-xs);
+  font-weight: var(--p58-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--p58-tracking-caps);
+  color: var(--p58-fg-3);
+}
+
+/* Code / data — JetBrains Mono */
+.p58-code, code.p58, kbd.p58 {
+  font-family: var(--p58-font-mono);
+  font-size: 0.92em;
+  color: var(--p58-fg-1);
+  background: var(--p58-surface-2);
+  border: 1px solid var(--p58-border);
+  border-radius: var(--p58-radius-sm);
+  padding: 1px 5px;
+}
+
+/* Metric — big display number, mono */
+.p58-metric {
+  font-family: var(--p58-font-mono);
+  font-size: var(--p58-text-4xl);
+  font-weight: var(--p58-weight-medium);
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--p58-fg-1);
+  font-variant-numeric: tabular-nums;
+}
+.p58-metric-sm {
+  font-family: var(--p58-font-mono);
+  font-size: var(--p58-text-xl);
+  font-weight: var(--p58-weight-medium);
+  line-height: 1;
+  color: var(--p58-fg-1);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Scrollbars — thin, unobtrusive */
+.p58-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
+.p58-scroll::-webkit-scrollbar-track { background: transparent; }
+.p58-scroll::-webkit-scrollbar-thumb {
+  background: var(--p58-border-strong);
+  border-radius: var(--p58-radius-full);
+  border: 2px solid var(--p58-bg);
+}
+.p58-scroll::-webkit-scrollbar-thumb:hover { background: var(--p58-fg-4); }
+
+/* Selection */
+::selection { background: var(--p58-accent-dim); color: var(--p58-fg-1); }
+
+/* =========================================================================
+   TREND / DELTA — semantic classes for metric movement.
+   Pick by CONTEXT (is this change good/bad/just movement?), not by sign.
+   All are mono + tabular-nums so arrows and digits align in stacks.
+   ========================================================================= */
+.p58-trend,
+.p58-trend-neutral,
+.p58-trend-negative,
+.p58-trend-positive {
+  font-family: var(--p58-font-mono);
+  font-size: var(--p58-text-xs);
+  font-variant-numeric: tabular-nums;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  line-height: 1;
+}
+.p58-trend,
+.p58-trend-neutral  { color: var(--p58-trend-neutral); }   /* default — no value judgement */
+.p58-trend-negative { color: var(--p58-trend-negative); }  /* red — regression */
+.p58-trend-positive { color: var(--p58-trend-positive); }  /* teal — explicit win vs baseline */
+.p58-trend-muted    { color: var(--p58-trend-muted); font-family: var(--p58-font-mono); font-size: var(--p58-text-xs); }
+.p58-trend-baseline { color: var(--p58-trend-muted); font-family: var(--p58-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; margin-left: 2px; }

package/src/tokens.ts

@@ -0,0 +1,240 @@
+/**
+ * Path58 Design Tokens — TypeScript mirror of tokens.css.
+ *
+ * The CANONICAL source of values is `tokens.css` (CSS custom properties on
+ * `:root`). This file mirrors those values as a deeply-frozen const so TS/JS
+ * consumers (build scripts, JS-driven styling, docs) can read the same numbers
+ * without parsing CSS. Keys map to `--p58-<group>-<name>` in the CSS.
+ *
+ * Parity for the sample keys (bg, accent, border) is asserted in
+ * `evidence/token-parity.md` (AC6). When you change a value here, change it in
+ * `tokens.css` too — they must not drift.
+ *
+ * Brand color families (BRAND_STRATEGY_v2 § Visual identity): `color.teal`
+ * (p58 accent), `color.blue` (shared navy anchor, stops 50-900), `color.lime`
+ * (Path58 money accent). The `accent*` keys are documented ALIASES of `teal*`
+ * (back-compat) — the canonical TS names are the `teal*` group; prefer those.
+ *
+ * Theme-DISPATCHED tokens — `color.accentFg` and `color.iconAccentSoft` — are the
+ * exception to value-mirroring: their value is the self-referencing CSS var
+ * (e.g. 'var(--p58-accent-fg)'), NOT a baked hex. A JS inline-style consumer emits
+ * the var, which the cascade resolves per active theme (bright teal on p58-dark;
+ * darker #007a63 on p58-light). Baking a hex would freeze them to one theme and
+ * defeat the dispatch. (accentFg: DSGN-1.1.5a / REQ-007; iconAccentSoft: DSGN-1.1.5b / REQ-008.)
+ *
+ * `color.brand3p` (React/HTML5 tech-logo identity colors) is INTENTIONALLY
+ * outside the theme system — these render as the upstream brands specify
+ * regardless of active theme. Do NOT theme-swap them. (DSGN-1.1.3, Decision #2.)
+ */
+
+export const tokens = {
+  color: {
+    // Base surfaces — maps to --p58-bg / --p58-surface*
+    bg: '#0a0a1a',
+    surface: '#0e0e24',
+    surface2: '#14142e',
+    surface3: '#1b1b3a',
+
+    // Foreground (on dark) — maps to --p58-fg-*
+    fg1: '#f5f6fb',
+    fg2: '#b8bad0',
+    fg3: '#7b7e9c',
+    fg4: '#4a4d6b',
+
+    // Borders & dividers — maps to --p58-border*
+    border: 'rgba(255, 255, 255, 0.08)',
+    borderStrong: 'rgba(255, 255, 255, 0.14)',
+    borderSubtle: 'rgba(255, 255, 255, 0.04)',
+
+    // Teal (p58 accent — data/dev/proof) — maps to --p58-teal* (canonical)
+    teal: '#00d4aa',
+    tealHover: '#1ee5bd',
+    tealPress: '#00b892',
+    tealDim: '#00d4aa22',
+    tealGlow: '#00d4aa44',
+    // tealTextOnLight: darker teal for teal-as-foreground on light (4.90:1 on #f4f6fa) — REQ-007
+    tealTextOnLight: '#007a63',
+    // onAccent: text/icon on a solid teal fill — dark ink, theme-independent (8.46:1 on teal) — REQ-007
+    onAccent: '#0d1d4d',
+    // accentFg: theme-DISPATCHED accent foreground (REQ-007 Class B / DSGN-1.1.5a).
+    // Unlike the resolved-hex tokens around it, this is CSS-time-resolved: the value
+    // is the self-referencing var so a JS inline-style consumer
+    // (style={{ color: tokens.color.accentFg }}) emits var(--p58-accent-fg), which
+    // the cascade dispatches to bright teal (p58-dark) or #007a63 (p58-light). A
+    // baked hex here would freeze it to one theme and defeat the dispatch.
+    accentFg: 'var(--p58-accent-fg)',
+
+    // iconAccentSoft: theme-DISPATCHED soft-icon foreground (REQ-008 Option A / DSGN-1.1.5b).
+    // Same CSS-time-resolved dispatch as accentFg above: the self-referencing var emits
+    // var(--p58-icon-accent-soft), which the cascade resolves to 70%-opacity teal (p58-dark,
+    // "soft icon" aesthetic) or fully-opaque #007a63 (p58-light, AA-body legible). A baked
+    // color-mix or hex would freeze it to one theme and reintroduce the on-light contrast fail.
+    iconAccentSoft: 'var(--p58-icon-accent-soft)',
+
+    // Accent — ALIASES of teal* (back-compat; maps to --p58-accent* → var(--p58-teal*))
+    accent: '#00d4aa',
+    accentHover: '#1ee5bd',
+    accentPress: '#00b892',
+    accentDim: '#00d4aa22',
+    accentGlow: '#00d4aa44',
+
+    // Blue (shared navy anchor) — maps to --p58-blue-* (anchor blue900 = #0d1d4d)
+    blue50: '#f8f8fa',
+    blue100: '#eeeff3',
+    blue200: '#e0e2e8',
+    blue300: '#c7cbd6',
+    blue400: '#adb2c2',
+    blue500: '#9097ad',
+    blue600: '#6e7794',
+    blue700: '#4c587b',
+    blue800: '#2c3a64',
+    blue900: '#0d1d4d',
+
+    // Lime (Path58 money accent — rare) — maps to --p58-lime*
+    // ⚠ limeTextOnLight is AA-large only on #f6f4ee (3.72:1) — see REQ-2026-06-02-005
+    lime: '#9ab64a',
+    limeTextOnLight: '#5e8a23',
+    limeWash: 'rgba(154, 182, 74, 0.32)',
+    lime300: '#c7d79b',
+    lime700: '#6c7f34',
+
+    // Semantic — maps to --p58-success/warning/danger/info(+dim)
+    success: '#00d4aa',
+    successDim: '#00d4aa1a',
+    warning: '#f5a623',
+    warningDim: '#f5a6231a',
+    danger: '#ff4757',
+    dangerDim: '#ff47571a',
+    info: '#5aa9ff',
+    infoDim: '#5aa9ff1a',
+
+    // Trend / delta — maps to --p58-trend-*
+    trendNegative: '#ff4757',
+
+    // Data-viz accents — maps to --p58-viz-*
+    viz1: '#00d4aa',
+    viz2: '#5aa9ff',
+    viz3: '#c084fc',
+    viz4: '#f5a623',
+    viz5: '#ff4757',
+    viz6: '#7b7e9c',
+
+    // Elevation backgrounds/borders — maps to --p58-elev-*
+    elev1Bg: '#0e0e24',
+    elev1Border: 'rgba(255, 255, 255, 0.08)',
+    elev2Bg: '#13132f',
+    elev2Border: 'rgba(255, 255, 255, 0.15)',
+    elev3Bg: '#16163a',
+    elev3Border: 'rgba(255, 255, 255, 0.22)',
+
+    // Third-party brand identity — maps to --p58-brand-3p-*
+    // ⚠ INTENTIONALLY OUTSIDE THE THEME SYSTEM. These are upstream tech-logo
+    // identity colors (React, HTML5) used in iconography — they must render as
+    // the upstream brands specify regardless of active theme. DO NOT theme-swap.
+    // Adding a new one: file a REQ documenting the upstream source. See the
+    // "Third-party brand identity colors" section in tokens.css.
+    brand3p: {
+      react: '#61DAFB',
+      reactHover: '#4DD0E1',
+      html5: '#E34F26',
+      html5Hover: '#F06529',
+    },
+  },
+
+  font: {
+    // Families — maps to --p58-font-*
+    display: "'Space Grotesk', ui-sans-serif, system-ui, sans-serif",
+    ui: "'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif",
+    mono: "'JetBrains Mono', ui-monospace, 'Menlo', 'Monaco', monospace",
+  },
+
+  // Type scale — maps to --p58-text-*
+  text: {
+    '2xs': '10px',
+    xs: '11px',
+    sm: '12px',
+    md: '13px',
+    base: '14px',
+    lg: '16px',
+    xl: '20px',
+    '2xl': '24px',
+    '3xl': '32px',
+    '4xl': '40px',
+    '5xl': '56px',
+    '6xl': '72px',
+  },
+
+  // Weights — maps to --p58-weight-*
+  weight: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+  },
+
+  // Line heights — maps to --p58-leading-*
+  leading: {
+    tight: 1.15,
+    snug: 1.3,
+    normal: 1.5,
+    loose: 1.7,
+  },
+
+  // Letter spacing — maps to --p58-tracking-*
+  tracking: {
+    tight: '-0.02em',
+    normal: '0',
+    wide: '0.04em',
+    caps: '0.12em',
+  },
+
+  // Spacing (4px baseline) — maps to --p58-space-*
+  space: {
+    0: '0',
+    1: '4px',
+    2: '8px',
+    3: '12px',
+    4: '16px',
+    5: '20px',
+    6: '24px',
+    8: '32px',
+    10: '40px',
+    12: '48px',
+    16: '64px',
+    20: '80px',
+    24: '96px',
+  },
+
+  // Radii — maps to --p58-radius-*
+  radius: {
+    none: '0',
+    sm: '2px',
+    md: '4px',
+    lg: '6px',
+    xl: '10px',
+    full: '999px',
+  },
+
+  // Motion — maps to --p58-ease* / --p58-duration-*
+  motion: {
+    ease: 'cubic-bezier(0.2, 0.6, 0.2, 1)',
+    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+    durationFast: '120ms',
+    durationBase: '180ms',
+    durationSlow: '260ms',
+  },
+
+  // Z-index — maps to --p58-z-*
+  z: {
+    base: 1,
+    sticky: 10,
+    dropdown: 100,
+    modal: 1000,
+    toast: 2000,
+  },
+} as const;
+
+export type Tokens = typeof tokens;
+
+export default tokens;