{
  "$description": "Ten31 CRM design tokens (W3C DTCG). Extracted as-built from frontend/index.html :root + an inline-style census, 2026-06-18. The app currently inlines these values (CSS :root vars + ~1300 inline style objects); this file is the canonical source going forward. Some real values (composite shadows, the radial-gradient page background) do not map to DTCG primitives and are documented as strings.",
  "color": {
    "bg": {
      "base":     { "$type": "color", "$value": "#0b1118", "$description": "Page background (darkest layer). Also the de-facto theme color; use for a future PWA manifest theme_color." },
      "panel":    { "$type": "color", "$value": "#111a27", "$description": "Cards, sections, modals, sidebar, slide-over." },
      "elevated": { "$type": "color", "$value": "#152233", "$description": "Elevated/hover panel state." },
      "hover":    { "$type": "color", "$value": "#1b2a3a", "$description": "Generic hover background." },
      "input":    { "$type": "color", "$value": "#0d1622", "$description": "Form input + table-header background (recessed)." }
    },
    "border": {
      "default": { "$type": "color", "$value": "#263548", "$description": "All borders, dividers, table grid lines. The most-used non-text color." },
      "strong":  { "$type": "color", "$value": "#35506a", "$description": "Emphasized border / card hover border." }
    },
    "text": {
      "primary":   { "$type": "color", "$value": "#e5edf5", "$description": "Headings, primary content." },
      "secondary": { "$type": "color", "$value": "#c7d3e0", "$description": "Body text, labels." },
      "muted":     { "$type": "color", "$value": "#8ea2b7", "$description": "Hints, metadata, table headers. Highest-frequency text color." },
      "subtle":    { "$type": "color", "$value": "#70859b", "$description": "Very secondary labels / inactive tabs." }
    },
    "accent": {
      "default": { "$type": "color", "$value": "#3b82c4", "$description": "Primary action, active nav, links, focus ring. The one vibrant brand color." },
      "strong":  { "$type": "color", "$value": "#2f6ea9", "$description": "Accent hover / gradient endpoint." },
      "soft":    { "$type": "color", "$value": "#3b82c422", "$description": "Accent at ~13% alpha — tinted badge/active backgrounds." },
      "light":   { "$type": "color", "$value": "#93c5fd", "$description": "Accent text on dark tinted backgrounds (badges, pills)." }
    },
    "semantic": {
      "success":      { "$type": "color", "$value": "#10b981", "$description": "Money / positive values." },
      "success-text": { "$type": "color", "$value": "#6ee7b7" },
      "warning":      { "$type": "color", "$value": "#f59e0b", "$description": "Advisor / warning." },
      "warning-text": { "$type": "color", "$value": "#fcd34d" },
      "due-soon":     { "$type": "color", "$value": "#e0b341", "$description": "Reminder due-soon urgency." },
      "danger":       { "$type": "color", "$value": "#dc2626", "$description": "Destructive action button." },
      "danger-soft":  { "$type": "color", "$value": "#e06c6c", "$description": "Overdue / error emphasis." },
      "danger-text":  { "$type": "color", "$value": "#fca5a5", "$description": "Inline error text." }
    },
    "constant": {
      "white": { "$type": "color", "$value": "#ffffff", "$description": "Text on accent fills; brand mark." }
    },
    "light": {
      "$description": "Light-theme palette (planned; adopted 2026-06-19). The color.* values above are the DARK/default theme; these are the light-mode overrides for the same semantic slots, sourced from the comps' [data-theme=\"light\"] blocks. accent.default stays #3b82c4 in both themes. Full per-component light tints (stage/staleness/note badges) live in design/_imports/2026-06-19/GridApp.dc.html. Dark remains the default; light is a user toggle.",
      "bg": {
        "base":     { "$type": "color", "$value": "#eaeef3" },
        "panel":    { "$type": "color", "$value": "#ffffff" },
        "elevated": { "$type": "color", "$value": "#f4f7fb" },
        "input":    { "$type": "color", "$value": "#eef2f7" },
        "hover":    { "$type": "color", "$value": "#e6ecf4" }
      },
      "border": {
        "default": { "$type": "color", "$value": "#d6dde7" },
        "strong":  { "$type": "color", "$value": "#b6c3d4" },
        "divider": { "$type": "color", "$value": "#e8edf3", "$description": "Dark-theme equivalent is #1c2735 (a distinct lighter-than-border divider the comps introduced)." }
      },
      "text": {
        "primary":   { "$type": "color", "$value": "#16202c" },
        "secondary": { "$type": "color", "$value": "#33414f" },
        "muted":     { "$type": "color", "$value": "#5a6b7d" },
        "subtle":    { "$type": "color", "$value": "#84909e" }
      },
      "accent": {
        "light": { "$type": "color", "$value": "#1f6fb8", "$description": "On-light accent text (darker than the dark-theme #93c5fd)." }
      },
      "semantic": {
        "danger-soft":  { "$type": "color", "$value": "#c0322f" },
        "success-text": { "$type": "color", "$value": "#057a55" }
      },
      "nav-bg": { "$type": "color", "$value": "#ffffffd9", "$description": "Translucent bottom-nav background (light)." },
      "shadow-card": { "$type": "shadow", "$value": "0 8px 20px rgba(40,70,110,0.10), inset 0 1px 0 #ffffff" }
    }
  },
  "font": {
    "family": {
      "sans": { "$type": "fontFamily", "$value": ["IBM Plex Sans", "Avenir Next", "Segoe UI", "sans-serif"] },
      "mono": { "$type": "fontFamily", "$value": ["IBM Plex Mono", "monospace"], "$description": "Numbers, dates, badges, logs, nav icons." }
    },
    "size": {
      "xs":  { "$type": "dimension", "$value": "11px", "$description": "Table headers, badges, micro-labels." },
      "sm":  { "$type": "dimension", "$value": "12px", "$description": "Help text, metadata." },
      "md":  { "$type": "dimension", "$value": "13px", "$description": "Body / table cells / inputs (desktop base). Mobile body base is 15px — see the `mobile` group + DESIGN.md §3/§8." },
      "lg":  { "$type": "dimension", "$value": "14px", "$description": "Nav items." },
      "xl":  { "$type": "dimension", "$value": "16px", "$description": "Section titles." },
      "2xl": { "$type": "dimension", "$value": "18px", "$description": "Modal titles." },
      "3xl": { "$type": "dimension", "$value": "20px", "$description": "Page/header title." },
      "4xl": { "$type": "dimension", "$value": "24px", "$description": "Login title, KPI values." }
    },
    "weight": {
      "regular":  { "$type": "fontWeight", "$value": 400 },
      "medium":   { "$type": "fontWeight", "$value": 500 },
      "semibold": { "$type": "fontWeight", "$value": 600 },
      "bold":     { "$type": "fontWeight", "$value": 700 }
    }
  },
  "space": {
    "2xs": { "$type": "dimension", "$value": "4px" },
    "xs":  { "$type": "dimension", "$value": "6px" },
    "sm":  { "$type": "dimension", "$value": "8px" },
    "md":  { "$type": "dimension", "$value": "12px", "$description": "Most common padding/gap unit." },
    "lg":  { "$type": "dimension", "$value": "16px" },
    "xl":  { "$type": "dimension", "$value": "20px", "$description": "Sidebar/header/content padding." },
    "2xl": { "$type": "dimension", "$value": "24px", "$description": "Modal padding." }
  },
  "radius": {
    "sm":   { "$type": "dimension", "$value": "4px", "$description": "Badges." },
    "md":   { "$type": "dimension", "$value": "6px", "$description": "Buttons, inputs, kanban cards." },
    "lg":   { "$type": "dimension", "$value": "8px", "$description": "Cards, nav items, sections." },
    "xl":   { "$type": "dimension", "$value": "12px", "$description": "Modals." },
    "pill": { "$type": "dimension", "$value": "999px", "$description": "Pills, skeleton lines." }
  },
  "shadow": {
    "$description": "Real composite shadows from the as-built CSS; kept as raw strings (multi-layer + inset highlight don't map to a single DTCG shadow token).",
    "card":      { "$type": "shadow", "$value": "0 14px 26px rgba(2,12,24,0.28), inset 0 1px 0 #ffffff07" },
    "card-hover":{ "$type": "shadow", "$value": "0 10px 20px rgba(7,17,30,0.35)" },
    "button-hover": { "$type": "shadow", "$value": "0 6px 14px rgba(12,40,68,0.35)" },
    "modal":     { "$type": "shadow", "$value": "0 24px 56px rgba(1,8,17,0.5), inset 0 1px 0 #ffffff08" },
    "slide-over":{ "$type": "shadow", "$value": "-12px 0 32px rgba(4,10,18,0.45), inset 1px 0 0 #ffffff07" },
    "toast":     { "$type": "shadow", "$value": "0 10px 24px rgba(4,12,22,0.45)" }
  },
  "motion": {
    "fast":   { "$type": "duration", "$value": "120ms", "$description": "Press/transform feedback." },
    "base":   { "$type": "duration", "$value": "150ms", "$description": "Hover color/shadow." },
    "panel":  { "$type": "duration", "$value": "300ms", "$description": "Slide-over / toast entry." },
    "sheet":  { "$type": "duration", "$value": "280ms", "$description": "Mobile bottom-sheet slide-up (cubic-bezier(.2,.8,.2,1))." }
  },
  "mobile": {
    "$description": "Mobile-first redesign deltas (2026-06-19 Claude Design round-trip; provenance in design/_imports/2026-06-19/, behavior in DESIGN.md §8). The values above are the desktop base; these override/extend for the <768px surface. Colors are unchanged — stage chips and staleness reuse the semantic tokens above (engaged→accent, diligence→due-soon, commitment→success, stale→danger-soft).",
    "font-size": {
      "body":         { "$type": "dimension", "$value": "15px", "$description": "Body / list rows / inputs (up from desktop md 13px)." },
      "card-title":   { "$type": "dimension", "$value": "16px", "$description": "Investor/card name." },
      "amount":       { "$type": "dimension", "$value": "15px", "$description": "Mono money values." },
      "screen-title": { "$type": "dimension", "$value": "21px", "$description": "Tab screen title." },
      "detail-title": { "$type": "dimension", "$value": "22px", "$description": "Full-screen detail header." },
      "sheet-title":  { "$type": "dimension", "$value": "18px", "$description": "Bottom-sheet title." },
      "tab-label":    { "$type": "dimension", "$value": "10px", "$description": "Mono bottom-tab label." }
    },
    "radius": {
      "card":    { "$type": "dimension", "$value": "10px", "$description": "Mobile cards (vs desktop lg 8px)." },
      "control": { "$type": "dimension", "$value": "8px",  "$description": "Mobile inputs/buttons (vs desktop md 6px)." },
      "sheet":   { "$type": "dimension", "$value": "20px", "$description": "Bottom-sheet top corners." }
    },
    "size": {
      "touch-target": { "$type": "dimension", "$value": "44px", "$description": "Minimum primary touch target." },
      "input":        { "$type": "dimension", "$value": "46px", "$description": "Form input / sheet field height." },
      "tab-bar":      { "$type": "dimension", "$value": "56px", "$description": "Bottom tab-bar item height." }
    },
    "space": {
      "screen-pad-x": { "$type": "dimension", "$value": "16px", "$description": "Screen horizontal padding (vs desktop xl 20px)." },
      "card-gap":     { "$type": "dimension", "$value": "10px", "$description": "Gap between cards in a list." }
    },
    "safe-area-bottom": { "$type": "dimension", "$value": "env(safe-area-inset-bottom)", "$description": "Not a static dimension — the sticky bottom nav and content bottom-padding must honor it. Kept as a CSS string." }
  },
  "_unmappable": {
    "$description": "Documented-but-not-tokenized: the page background is a layered radial-gradient ('radial-gradient(1200px 600px at 15% -10%, #1a3c5e44, transparent 60%), radial-gradient(1000px 500px at 90% 0%, #27496b33, transparent 58%), #0b1118') — see DESIGN.md §Depth/elevation."
  }
}