{
  "$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." }
    }
  },
  "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 (current desktop base). NOTE: bump toward 15–16px for mobile body — see BRIEF.md." },
      "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." }
  },
  "_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."
  }
}