{
  "meta": {
    "name": "Vecreal brand atoms design tokens",
    "status": "draft extraction from locked HTML reference",
    "generatedFrom": "reference-design-system.html",
    "generatedOn": "2026-05-03",
    "canonicalVisualReference": "reference-design-system.html",
    "extractionNotes": [
      "CSS variables come from the first locked :root block in the HTML head.",
      "Breakpoints are documented in the HTML and extracted from section 22 because they are comments in :root, not active CSS declarations.",
      "Typography scale comes from section 05 because font classes are documented there, not as :root CSS variables.",
      "Section 59 (P-14) and Section 63 (P-13) added 2026-05-03; loop/anim entries documented under motion."
    ],
    "sources": [
      "CSS :root locked token block, lines 12-104",
      "section 04 \u2014 Color",
      "section 05 \u2014 Typography",
      "section 22 \u2014 Foundations",
      "section 23 \u2014 Iconography",
      "section 48 \u2014 Cross-cutting",
      "section 59 \u2014 Approval workflow (P-14 motion, locked 2026-05-03)",
      "section 63 \u2014 Loading micro-indicators (locked 2026-05-03)"
    ]
  },
  "colors": {
    "bg-app-light": {
      "cssVariable": "--bg-app-light",
      "value": "#FAFAF8",
      "role": "",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#FAFAF8"
    },
    "bg-card-light": {
      "cssVariable": "--bg-card-light",
      "value": "#FFFFFF",
      "role": "",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#FFFFFF"
    },
    "bg-card-light-bottom": {
      "cssVariable": "--bg-card-light-bottom",
      "value": "#FBFAF7",
      "role": "card gradient bottom on light",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#FBFAF7"
    },
    "bg-soft-light": {
      "cssVariable": "--bg-soft-light",
      "value": "#F4F4F1",
      "role": "",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#F4F4F1"
    },
    "bg-hover-light": {
      "cssVariable": "--bg-hover-light",
      "value": "#EFEFEC",
      "role": "",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#EFEFEC"
    },
    "border-light": {
      "cssVariable": "--border-light",
      "value": "#E8E6E0",
      "role": "",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#E8E6E0"
    },
    "border-light-subtle": {
      "cssVariable": "--border-light-subtle",
      "value": "#F0EEE8",
      "role": "",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#F0EEE8"
    },
    "border-light-strong": {
      "cssVariable": "--border-light-strong",
      "value": "#D6D3CB",
      "role": "=== Surfaces (dark) ===",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#D6D3CB"
    },
    "bg-sidebar-dark": {
      "cssVariable": "--bg-sidebar-dark",
      "value": "#0a0b0d",
      "role": "always-dark sidebar (both modes)",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#0a0b0d"
    },
    "bg-app-dark": {
      "cssVariable": "--bg-app-dark",
      "value": "#131517",
      "role": "main bg / app surface (dark mode)",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#131517"
    },
    "bg-card-dark-top": {
      "cssVariable": "--bg-card-dark-top",
      "value": "#21242a",
      "role": "card gradient top",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#21242a"
    },
    "bg-card-dark-bottom": {
      "cssVariable": "--bg-card-dark-bottom",
      "value": "#1c1e23",
      "role": "card gradient bottom",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#1c1e23"
    },
    "bg-pill-dark": {
      "cssVariable": "--bg-pill-dark",
      "value": "#1f2126",
      "role": "topbar pill, secondary surfaces",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#1f2126"
    },
    "bg-cta-dark": {
      "cssVariable": "--bg-cta-dark",
      "value": "#1F1D1A",
      "role": "primary CTA bubble (warm black, locked)",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#1F1D1A"
    },
    "border-dark": {
      "cssVariable": "--border-dark",
      "value": "#2d2f36",
      "role": "card borders, subtle dividers",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#2d2f36"
    },
    "border-dark-subtle": {
      "cssVariable": "--border-dark-subtle",
      "value": "#1d1f24",
      "role": "deepest separators",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#1d1f24"
    },
    "text-light-primary": {
      "cssVariable": "--text-light-primary",
      "value": "#1F1D1A",
      "role": "headings, body emphasis",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#1F1D1A"
    },
    "text-light-secondary": {
      "cssVariable": "--text-light-secondary",
      "value": "#5A5550",
      "role": "body text",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#5A5550"
    },
    "text-light-tertiary": {
      "cssVariable": "--text-light-tertiary",
      "value": "#918A82",
      "role": "meta, timestamps",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#918A82"
    },
    "text-light-disabled": {
      "cssVariable": "--text-light-disabled",
      "value": "#B8B2A8",
      "role": "dividers, separator chars",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#B8B2A8"
    },
    "text-dark-primary": {
      "cssVariable": "--text-dark-primary",
      "value": "#f7f8f8",
      "role": "LOCKED soft off-white. Headings, eyebrow flagged, wordmark.",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#f7f8f8"
    },
    "text-dark-body": {
      "cssVariable": "--text-dark-body",
      "value": "#d0d6e0",
      "role": "body text, action row titles",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#d0d6e0"
    },
    "text-dark-muted": {
      "cssVariable": "--text-dark-muted",
      "value": "#9097a1",
      "role": "eyebrow type label, action row details",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#9097a1"
    },
    "text-dark-tertiary": {
      "cssVariable": "--text-dark-tertiary",
      "value": "#62666d",
      "role": "section labels, meta, dividers",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#62666d"
    },
    "text-dark-disabled": {
      "cssVariable": "--text-dark-disabled",
      "value": "#5a5e66",
      "role": "disabled buttons, placeholder",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#5a5e66"
    },
    "clay-light": {
      "cssVariable": "--clay-light",
      "value": "#A05847",
      "role": "LOCKED primary on light surfaces (wordmark, references, chrome)",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#A05847"
    },
    "clay-bright": {
      "cssVariable": "--clay-bright",
      "value": "#C68070",
      "role": "LOCKED primary on dark surfaces",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#C68070"
    },
    "clay": {
      "cssVariable": "--clay",
      "value": "#7A3D32",
      "role": "deep brand accent for high-emphasis",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#7A3D32"
    },
    "clay-dark": {
      "cssVariable": "--clay-dark",
      "value": "#5C2D26",
      "role": "hover/depth for clay-family",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#5C2D26"
    },
    "success": {
      "cssVariable": "--success",
      "value": "#5DA17D",
      "role": "live indicator, confidence high, success states",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#5DA17D"
    },
    "success-dark": {
      "cssVariable": "--success-dark",
      "value": "#4a8a68",
      "role": "gradient toned-down variant",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#4a8a68"
    },
    "warning-light": {
      "cssVariable": "--warning-light",
      "value": "#A87A2E",
      "role": "flagged status on light surface",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#A87A2E"
    },
    "warning-dark": {
      "cssVariable": "--warning-dark",
      "value": "#d4a960",
      "role": "flagged status on dark surface",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#d4a960"
    },
    "error": {
      "cssVariable": "--error",
      "value": "#c95151",
      "role": "high priority, overdue, error states",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#c95151"
    },
    "error-dark": {
      "cssVariable": "--error-dark",
      "value": "#B53D3D",
      "role": "darker error for emphasis",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#B53D3D"
    },
    "info": {
      "cssVariable": "--info",
      "value": "#5A6878",
      "role": "muted slate for info banners",
      "source": "section 04 \u2014 Color; CSS :root locked token block",
      "hex": "#5A6878"
    }
  },
  "colorContrast": [
    {
      "check": "text-primary on app",
      "result": "16.4 : 1 \u00b7 AAA",
      "source": "section 04 \u2014 Color"
    },
    {
      "check": "text-secondary on card",
      "result": "7.8 : 1 \u00b7 AAA",
      "source": "section 04 \u2014 Color"
    },
    {
      "check": "text-tertiary on card",
      "result": "3.6 : 1 \u00b7 AA large only",
      "source": "section 04 \u2014 Color"
    },
    {
      "check": "clay-light on white",
      "result": "5.1 : 1 \u00b7 AA text",
      "source": "section 04 \u2014 Color"
    },
    {
      "check": "clay-bright on #131517",
      "result": "5.4 : 1 \u00b7 AA text",
      "source": "section 04 \u2014 Color"
    },
    {
      "check": "error on white",
      "result": "4.7 : 1 \u00b7 AA",
      "source": "section 04 \u2014 Color"
    },
    {
      "check": "success on white",
      "result": "3.4 : 1 \u00b7 AA large only",
      "source": "section 04 \u2014 Color"
    }
  ],
  "spacing": {
    "sp-0": {
      "cssVariable": "--sp-0",
      "value": "0px",
      "role": "reset",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-1": {
      "cssVariable": "--sp-1",
      "value": "2px",
      "role": "hairline",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-2": {
      "cssVariable": "--sp-2",
      "value": "4px",
      "role": "tight inline",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-3": {
      "cssVariable": "--sp-3",
      "value": "6px",
      "role": "compact",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-4": {
      "cssVariable": "--sp-4",
      "value": "8px",
      "role": "default inline",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-5": {
      "cssVariable": "--sp-5",
      "value": "10px",
      "role": "row spacing",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-6": {
      "cssVariable": "--sp-6",
      "value": "12px",
      "role": "card-to-row gap",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-7": {
      "cssVariable": "--sp-7",
      "value": "14px",
      "role": "compact card pad",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-8": {
      "cssVariable": "--sp-8",
      "value": "16px",
      "role": "standard card pad",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-9": {
      "cssVariable": "--sp-9",
      "value": "20px",
      "role": "loose card pad",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-10": {
      "cssVariable": "--sp-10",
      "value": "24px",
      "role": "section inner / page-x",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-11": {
      "cssVariable": "--sp-11",
      "value": "32px",
      "role": "subsection break",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-12": {
      "cssVariable": "--sp-12",
      "value": "40px",
      "role": "section gap (tight)",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-13": {
      "cssVariable": "--sp-13",
      "value": "56px",
      "role": "section padding-y",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "sp-14": {
      "cssVariable": "--sp-14",
      "value": "80px",
      "role": "=== Border-radius scale ===",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    }
  },
  "radii": {
    "r-1": {
      "cssVariable": "--r-1",
      "value": "3px",
      "role": "chips, count badges",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "r-2": {
      "cssVariable": "--r-2",
      "value": "4px",
      "role": "pills, citations",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "r-3": {
      "cssVariable": "--r-3",
      "value": "5px",
      "role": "small buttons",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "r-4": {
      "cssVariable": "--r-4",
      "value": "6px",
      "role": "default buttons, inputs",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "r-5": {
      "cssVariable": "--r-5",
      "value": "7px",
      "role": "cards, panels",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "r-6": {
      "cssVariable": "--r-6",
      "value": "8px",
      "role": "dashboards, modals",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "r-7": {
      "cssVariable": "--r-7",
      "value": "10px",
      "role": "",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "r-full": {
      "cssVariable": "--r-full",
      "value": "50%",
      "role": "=== Motion ===",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    }
  },
  "motion": {
    "motion-instant": {
      "cssVariable": "--motion-instant",
      "value": "0ms",
      "role": "",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "motion-fast": {
      "cssVariable": "--motion-fast",
      "value": "120ms",
      "role": "hover, focus rings",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "motion-medium": {
      "cssVariable": "--motion-medium",
      "value": "180ms",
      "role": "tooltips, popovers",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "motion-slow": {
      "cssVariable": "--motion-slow",
      "value": "240ms",
      "role": "modals, side panels",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "motion-page": {
      "cssVariable": "--motion-page",
      "value": "320ms",
      "role": "route transitions",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "ease-out": {
      "cssVariable": "--ease-out",
      "value": "cubic-bezier(0.2, 0.8, 0.2, 1)",
      "role": "cubic-bezier(0.16, 1, 0.3, 1)",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "ease-in": {
      "cssVariable": "--ease-in",
      "value": "cubic-bezier(0.4, 0, 0.6, 0.4)",
      "role": "",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "ease-in-out": {
      "cssVariable": "--ease-in-out",
      "value": "cubic-bezier(0.4, 0, 0.2, 1)",
      "role": "cubic-bezier(0.4, 0, 0.2, 1)",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "ease-spring": {
      "cssVariable": "--ease-spring",
      "value": "cubic-bezier(0.16, 1, 0.3, 1)",
      "role": "=== Shadows ===",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "loop-qring": {
      "name": "qring rotation (Section 63)",
      "value": "0.9s linear infinite",
      "role": "quarter-ring loader rotation; outside named --motion-* tokens (loop, not transition)",
      "source": "section 63 \u2014 Loading micro-indicators"
    },
    "loop-dring": {
      "name": "dring rotation (Section 63)",
      "value": "1.2s linear infinite",
      "role": "dash-ring sync indicator rotation; outside named --motion-* tokens",
      "source": "section 63 \u2014 Loading micro-indicators"
    },
    "loop-bars": {
      "name": "bars amplitude (Section 63)",
      "value": "0.95s ease-in-out infinite (0.13s stagger between)",
      "role": "analyzing/processing bars height pulse",
      "source": "section 63 \u2014 Loading micro-indicators"
    },
    "loop-shimmer": {
      "name": "text shimmer (Section 63)",
      "value": "1.6s ease-in-out infinite",
      "role": "streaming-token gradient sweep on actively-streaming line",
      "source": "section 63 \u2014 Loading micro-indicators"
    },
    "loop-cursor": {
      "name": "terminal cursor (Section 63)",
      "value": "1.06s steps(1, end) infinite",
      "role": "log/terminal cursor blink (hard on/off, no fade)",
      "source": "section 63 \u2014 Loading micro-indicators"
    },
    "loop-active-pulse": {
      "name": "active step pulse (Section 59 P-14)",
      "value": "1.8s ease-in-out infinite",
      "role": "approval workflow active step ring pulse; signals 'your turn'",
      "source": "section 59 \u2014 Approval workflow (P-14 motion)"
    },
    "anim-check-draw": {
      "name": "check-draw transition (Section 59 P-14)",
      "value": "0.75s ease-out forwards",
      "role": "approval workflow done step check-mark draw on transition; one-shot",
      "source": "section 59 \u2014 Approval workflow (P-14 motion)"
    }
  },
  "breakpoints": {
    "bp-mobile": {
      "cssVariable": "--bp-mobile",
      "value": "640px",
      "role": "responsive breakpoint",
      "source": "section 22 \u2014 Foundations"
    },
    "bp-tablet": {
      "cssVariable": "--bp-tablet",
      "value": "1024px",
      "role": "responsive breakpoint",
      "source": "section 22 \u2014 Foundations"
    },
    "bp-desktop": {
      "cssVariable": "--bp-desktop",
      "value": "1440px",
      "role": "responsive breakpoint",
      "source": "section 22 \u2014 Foundations"
    },
    "bp-wide": {
      "cssVariable": "--bp-wide",
      "value": "1920px",
      "role": "responsive breakpoint",
      "source": "section 22 \u2014 Foundations"
    }
  },
  "shadows": {
    "shadow-card-dark": {
      "cssVariable": "--shadow-card-dark",
      "value": "0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 4px rgba(0,0,0,0.4)",
      "role": "",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "shadow-card-light": {
      "cssVariable": "--shadow-card-light",
      "value": "0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(31,29,26,0.05)",
      "role": "",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "shadow-modal-dark": {
      "cssVariable": "--shadow-modal-dark",
      "value": "0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 48px rgba(0,0,0,0.6)",
      "role": "",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "shadow-modal-light": {
      "cssVariable": "--shadow-modal-light",
      "value": "0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 48px rgba(31,29,26,0.18)",
      "role": "",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "shadow-tooltip-dark": {
      "cssVariable": "--shadow-tooltip-dark",
      "value": "0 12px 32px rgba(0,0,0,0.5)",
      "role": "",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "shadow-tooltip-light": {
      "cssVariable": "--shadow-tooltip-light",
      "value": "0 12px 32px rgba(31,29,26,0.15)",
      "role": "=== Focus ring ===",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    }
  },
  "focus": {
    "focus-ring": {
      "cssVariable": "--focus-ring",
      "value": "0 0 0 3px rgba(160, 88, 71, 0.5)",
      "role": "clay-tinted, 50% opacity",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    },
    "focus-ring-soft": {
      "cssVariable": "--focus-ring-soft",
      "value": "0 0 0 3px rgba(160, 88, 71, 0.18)",
      "role": "=== Responsive breakpoints (referenced via @media; documented for consistency) ===",
      "source": "section 22 \u2014 Foundations; CSS :root locked token block"
    }
  },
  "typography": {
    "headline-display": {
      "name": ".headline-display",
      "value": "Inter 700 \u00b7 44px / 1.1 / -0.03em",
      "source": "section 05 \u2014 Typography"
    },
    "heading-h1": {
      "name": ".heading-h1",
      "value": "Inter 600 \u00b7 32px / 1.2 / -0.02em",
      "source": "section 05 \u2014 Typography"
    },
    "heading-h2": {
      "name": ".heading-h2",
      "value": "Inter 600 \u00b7 22px / 1.3 / 0",
      "source": "section 05 \u2014 Typography"
    },
    "body": {
      "name": "Body",
      "value": "default body, descriptions",
      "source": "section 05 \u2014 Typography"
    },
    "text-small": {
      "name": ".text-small",
      "value": "Inter 400 \u00b7 13px / 1.5 / 0",
      "source": "section 05 \u2014 Typography"
    },
    "text-mono": {
      "name": ".text-mono",
      "value": "JetBrains Mono 500 \u00b7 12px / 1.5 / 0.04em",
      "source": "section 05 \u2014 Typography"
    },
    "font-sans": {
      "name": "--font-sans",
      "value": "\"Inter\", system-ui, sans-serif",
      "source": "section 05 \u2014 Typography"
    },
    "font-mono": {
      "name": "--font-mono",
      "value": "\"JetBrains Mono\", monospace",
      "source": "section 05 \u2014 Typography"
    },
    "loaded-weights-inter": {
      "name": "loaded weights (Inter)",
      "value": "300, 400, 500, 600, 700",
      "source": "section 05 \u2014 Typography"
    },
    "loaded-weights-mono": {
      "name": "loaded weights (mono)",
      "value": "400, 500",
      "source": "section 05 \u2014 Typography"
    },
    "font-source": {
      "name": "font source",
      "value": "Google Fonts (free)",
      "source": "section 05 \u2014 Typography"
    },
    "display": {
      "name": "Display",
      "value": "marketing hero, lockup taglines",
      "source": "section 05 \u2014 Typography"
    },
    "h1": {
      "name": "H1",
      "value": "page title, section opener",
      "source": "section 05 \u2014 Typography"
    },
    "h2-body": {
      "name": "h2 / body",
      "value": "0 (default)",
      "source": "section 05 \u2014 Typography"
    },
    "mono": {
      "name": "Mono",
      "value": "IDs, citations, timestamps, code, kbd",
      "source": "section 05 \u2014 Typography"
    },
    "eyebrow-caps": {
      "name": "eyebrow caps",
      "value": "+0.10em (uppercase)",
      "source": "section 05 \u2014 Typography"
    },
    "nav-labels-caps": {
      "name": "nav labels caps",
      "value": "+0.14em (uppercase)",
      "source": "section 05 \u2014 Typography"
    },
    "h2": {
      "name": "H2",
      "value": "subsection, card title",
      "source": "section 05 \u2014 Typography"
    },
    "small": {
      "name": "Small",
      "value": "meta, captions, helper",
      "source": "section 05 \u2014 Typography"
    },
    "min-body-size": {
      "name": "min body size",
      "value": "13px (Small) \u2014 never below",
      "source": "section 05 \u2014 Typography"
    },
    "min-line-height": {
      "name": "min line-height",
      "value": "1.5 (body); 1.2 acceptable for display",
      "source": "section 05 \u2014 Typography"
    },
    "dynamic-type": {
      "name": "dynamic type",
      "value": "all sizes scale with rem",
      "source": "section 05 \u2014 Typography"
    },
    "font-display": {
      "name": "font-display",
      "value": "swap (no FOIT)",
      "source": "section 05 \u2014 Typography"
    },
    "dyslexia-safe": {
      "name": "dyslexia-safe",
      "value": "Inter passes; avoid all-italic body",
      "source": "section 05 \u2014 Typography"
    },
    "scale-base": {
      "name": "scale base",
      "value": "16px (1rem) body",
      "source": "section 05 \u2014 Typography"
    }
  },
  "brandMark": {
    "bk-v-margin-right": {
      "cssVariable": "--bk-v-margin-right",
      "value": "-0.11em",
      "role": "V-to-e gap \u2014 slackened from -0.13em to suit V at 0.66em (LOCKED 2026-05-11 rev-3, Option F rebalance)",
      "source": "section 01 \u2014 Wordmark; CSS :root locked token block"
    },
    "bk-dot-size": {
      "cssVariable": "--bk-dot-size",
      "value": "0.20em",
      "role": "dot diameter \u2014 reduced from 0.22em to rebalance against smaller V (LOCKED 2026-05-11 rev-3, Option F rebalance)",
      "source": "section 01 \u2014 Wordmark; CSS :root locked token block"
    },
    "bk-dot-margin-left": {
      "cssVariable": "--bk-dot-margin-left",
      "value": "calc(0.04em + 2px)",
      "role": "spacing from \"l\" \u2014 0.04em + fixed 2px pre-dot breath (LOCKED 2026-05-11 amendment; unchanged in rev-3)",
      "source": "section 01 \u2014 Wordmark; CSS :root locked token block"
    },
    "bk-dot-margin-bottom": {
      "cssVariable": "--bk-dot-margin-bottom",
      "value": "0.005em",
      "role": "baseline-sit nudge",
      "source": "section 01 \u2014 Wordmark; CSS :root locked token block"
    },
    "bk-v-height": {
      "cssVariable": "(applied via .bk-wordmark .bk-v height)",
      "value": "0.66em",
      "role": "uppercase V height \u2014 eased below cap-height for less V dominance (LOCKED 2026-05-11 rev-3, Option F rebalance; was 0.72em in rev-2)",
      "source": "section 01 \u2014 Wordmark; .bk-wordmark .bk-v CSS rule"
    }
  },
  "lockedRootVariables": [
    {
      "cssVariable": "--bg-app-light",
      "value": "#FAFAF8",
      "description": "",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-card-light",
      "value": "#FFFFFF",
      "description": "",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-card-light-bottom",
      "value": "#FBFAF7",
      "description": "card gradient bottom on light",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-soft-light",
      "value": "#F4F4F1",
      "description": "",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-hover-light",
      "value": "#EFEFEC",
      "description": "",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--border-light",
      "value": "#E8E6E0",
      "description": "",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--border-light-subtle",
      "value": "#F0EEE8",
      "description": "",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--border-light-strong",
      "value": "#D6D3CB",
      "description": "=== Surfaces (dark) ===",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-sidebar-dark",
      "value": "#0a0b0d",
      "description": "always-dark sidebar (both modes)",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-app-dark",
      "value": "#131517",
      "description": "main bg / app surface (dark mode)",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-card-dark-top",
      "value": "#21242a",
      "description": "card gradient top",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-card-dark-bottom",
      "value": "#1c1e23",
      "description": "card gradient bottom",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-pill-dark",
      "value": "#1f2126",
      "description": "topbar pill, secondary surfaces",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bg-cta-dark",
      "value": "#1F1D1A",
      "description": "primary CTA bubble (warm black, locked)",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--border-dark",
      "value": "#2d2f36",
      "description": "card borders, subtle dividers",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--border-dark-subtle",
      "value": "#1d1f24",
      "description": "deepest separators",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--text-light-primary",
      "value": "#1F1D1A",
      "description": "headings, body emphasis",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--text-light-secondary",
      "value": "#5A5550",
      "description": "body text",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--text-light-tertiary",
      "value": "#918A82",
      "description": "meta, timestamps",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--text-light-disabled",
      "value": "#B8B2A8",
      "description": "dividers, separator chars",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--text-dark-primary",
      "value": "#f7f8f8",
      "description": "LOCKED soft off-white. Headings, eyebrow flagged, wordmark.",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--text-dark-body",
      "value": "#d0d6e0",
      "description": "body text, action row titles",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--text-dark-muted",
      "value": "#9097a1",
      "description": "eyebrow type label, action row details",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--text-dark-tertiary",
      "value": "#62666d",
      "description": "section labels, meta, dividers",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--text-dark-disabled",
      "value": "#5a5e66",
      "description": "disabled buttons, placeholder",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--clay-light",
      "value": "#A05847",
      "description": "LOCKED primary on light surfaces (wordmark, references, chrome)",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--clay-bright",
      "value": "#C68070",
      "description": "LOCKED primary on dark surfaces",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--clay",
      "value": "#7A3D32",
      "description": "deep brand accent for high-emphasis",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--clay-dark",
      "value": "#5C2D26",
      "description": "hover/depth for clay-family",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--success",
      "value": "#5DA17D",
      "description": "live indicator, confidence high, success states",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--success-dark",
      "value": "#4a8a68",
      "description": "gradient toned-down variant",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--warning-light",
      "value": "#A87A2E",
      "description": "flagged status on light surface",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--warning-dark",
      "value": "#d4a960",
      "description": "flagged status on dark surface",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--error",
      "value": "#c95151",
      "description": "high priority, overdue, error states",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--error-dark",
      "value": "#B53D3D",
      "description": "darker error for emphasis",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--info",
      "value": "#5A6878",
      "description": "muted slate for info banners",
      "category": "colors",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-0",
      "value": "0px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-1",
      "value": "2px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-2",
      "value": "4px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-3",
      "value": "6px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-4",
      "value": "8px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-5",
      "value": "10px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-6",
      "value": "12px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-7",
      "value": "14px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-8",
      "value": "16px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-9",
      "value": "20px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-10",
      "value": "24px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-11",
      "value": "32px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-12",
      "value": "40px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-13",
      "value": "56px",
      "description": "",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--sp-14",
      "value": "80px",
      "description": "=== Border-radius scale ===",
      "category": "spacing",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--r-1",
      "value": "3px",
      "description": "",
      "category": "radii",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--r-2",
      "value": "4px",
      "description": "",
      "category": "radii",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--r-3",
      "value": "5px",
      "description": "",
      "category": "radii",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--r-4",
      "value": "6px",
      "description": "",
      "category": "radii",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--r-5",
      "value": "7px",
      "description": "",
      "category": "radii",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--r-6",
      "value": "8px",
      "description": "",
      "category": "radii",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--r-7",
      "value": "10px",
      "description": "",
      "category": "radii",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--r-full",
      "value": "50%",
      "description": "=== Motion ===",
      "category": "radii",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--motion-instant",
      "value": "0ms",
      "description": "",
      "category": "motion",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--motion-fast",
      "value": "120ms",
      "description": "hover, focus rings",
      "category": "motion",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--motion-medium",
      "value": "180ms",
      "description": "tooltips, popovers",
      "category": "motion",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--motion-slow",
      "value": "240ms",
      "description": "modals, side panels",
      "category": "motion",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--motion-page",
      "value": "320ms",
      "description": "route transitions",
      "category": "motion",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--ease-out",
      "value": "cubic-bezier(0.2, 0.8, 0.2, 1)",
      "description": "",
      "category": "motion",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--ease-in",
      "value": "cubic-bezier(0.4, 0, 0.6, 0.4)",
      "description": "",
      "category": "motion",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--ease-in-out",
      "value": "cubic-bezier(0.4, 0, 0.2, 1)",
      "description": "",
      "category": "motion",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--ease-spring",
      "value": "cubic-bezier(0.16, 1, 0.3, 1)",
      "description": "=== Shadows ===",
      "category": "motion",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--shadow-card-dark",
      "value": "0 1px 0 rgba(255,255,255,0.05) inset, 0 1px 4px rgba(0,0,0,0.4)",
      "description": "",
      "category": "shadows",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--shadow-card-light",
      "value": "0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(31,29,26,0.05)",
      "description": "",
      "category": "shadows",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--shadow-modal-dark",
      "value": "0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 48px rgba(0,0,0,0.6)",
      "description": "",
      "category": "shadows",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--shadow-modal-light",
      "value": "0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 48px rgba(31,29,26,0.18)",
      "description": "",
      "category": "shadows",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--shadow-tooltip-dark",
      "value": "0 12px 32px rgba(0,0,0,0.5)",
      "description": "",
      "category": "shadows",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--shadow-tooltip-light",
      "value": "0 12px 32px rgba(31,29,26,0.15)",
      "description": "=== Focus ring ===",
      "category": "shadows",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--focus-ring",
      "value": "0 0 0 3px rgba(160, 88, 71, 0.5)",
      "description": "clay-tinted, 50% opacity",
      "category": "focus",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--focus-ring-soft",
      "value": "0 0 0 3px rgba(160, 88, 71, 0.18)",
      "description": "=== Responsive breakpoints (referenced via @media; documented for consistency) ===",
      "category": "focus",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bp-mobile",
      "value": "640px",
      "description": "",
      "category": "other",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bp-tablet",
      "value": "1024px",
      "description": "",
      "category": "other",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bp-desktop",
      "value": "1440px",
      "description": "",
      "category": "other",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bp-wide",
      "value": "1920px",
      "description": "",
      "category": "other",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bk-v-margin-right",
      "value": "-0.11em",
      "description": "V-to-e gap \u2014 slackened from -0.13em to suit V at 0.66em (LOCKED 2026-05-11 rev-3, Option F rebalance)",
      "category": "brandMark",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bk-dot-size",
      "value": "0.20em",
      "description": "dot diameter \u2014 reduced from 0.22em to rebalance against smaller V (LOCKED 2026-05-11 rev-3, Option F rebalance)",
      "category": "brandMark",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bk-dot-margin-left",
      "value": "calc(0.04em + 2px)",
      "description": "spacing from \"l\" \u2014 0.04em + fixed 2px pre-dot breath (LOCKED 2026-05-11 amendment)",
      "category": "brandMark",
      "source": "CSS :root locked token block, lines 12-104"
    },
    {
      "cssVariable": "--bk-dot-margin-bottom",
      "value": "0.005em",
      "description": "baseline-sit nudge",
      "category": "brandMark",
      "source": "CSS :root locked token block, lines 12-104"
    }
  ],
  "notes": {
    "conflictOrder": "principles > tokens > components > one-off (source: section 07 \u2014 Design system principles)",
    "accessibilityTarget": "WCAG 2.1 AA across all surfaces (source: section 48 \u2014 Cross-cutting)",
    "iconBaseline": "Stroke-based 14x14 viewBox, stroke-width 1.4, currentColor inheritance (source: section 23 \u2014 Iconography)"
  }
}