{
  "color": {
    "primitive": {
      "slate":        { "value": "#0F172A" },
      "slate-800":    { "value": "#1E293B" },
      "slate-700":    { "value": "#334155" },
      "slate-600":    { "value": "#475569" },
      "slate-500":    { "value": "#64748B" },
      "slate-300":    { "value": "#CBD5E1" },
      "slate-200":    { "value": "#E2E8F0" },
      "slate-100":    { "value": "#F1F5F9" },
      "offwhite":     { "value": "#FAFAF8" },
      "white":        { "value": "#FFFFFF" },
      "brass":        { "value": "#C8A35B" },
      "brass-hover":  { "value": "#BC9550" },
      "brass-hover-dark": { "value": "#D4B373", "comment": "hover on dark surfaces LIGHTENS brass (light surfaces darken it)" },
      "brass-active": { "value": "#B89149" },
      "brass-tint":   { "value": "#F6F3EB" },
      "steel":        { "value": "#4E7CA1" },
      "steel-hover":  { "value": "#456E8E" },
      "success":      { "value": "#22C55E" },
      "warning":      { "value": "#D97706" },
      "error":        { "value": "#DC2626" }
    },
    "semantic": {
      "light": {
        "text-primary":           { "value": "{color.primitive.slate}" },
        "text-secondary":         { "value": "{color.primitive.slate-500}" },
        "text-inverse":           { "value": "{color.primitive.white}" },
        "text-on-accent":         { "value": "{color.primitive.slate}" },
        "bg-page":                { "value": "{color.primitive.offwhite}" },
        "bg-surface":             { "value": "{color.primitive.white}" },
        "bg-muted":               { "value": "{color.primitive.slate-100}" },
        "bg-accent":              { "value": "{color.primitive.brass-tint}" },
        "bg-inverse":             { "value": "{color.primitive.slate}" },
        "border-default":         { "value": "{color.primitive.slate-200}" },
        "border-strong":          { "value": "{color.primitive.slate-300}" },
        "action-primary":         { "value": "{color.primitive.brass}" },
        "action-primary-hover":   { "value": "{color.primitive.brass-hover}" },
        "action-primary-active":  { "value": "{color.primitive.brass-active}" },
        "action-primary-text":    { "value": "{color.primitive.slate}" },
        "action-secondary":       { "value": "{color.primitive.steel}" },
        "action-secondary-hover": { "value": "{color.primitive.steel-hover}" },
        "action-secondary-text":  { "value": "{color.primitive.white}" },
        "focus-ring":             { "value": "{color.primitive.brass}" }
      },
      "dark": {
        "text-primary":           { "value": "{color.primitive.slate-100}" },
        "text-secondary":         { "value": "#94A3B8" },
        "text-inverse":           { "value": "{color.primitive.slate}" },
        "text-on-accent":         { "value": "{color.primitive.slate}" },
        "bg-page":                { "value": "{color.primitive.slate}" },
        "bg-surface":             { "value": "{color.primitive.slate-800}" },
        "bg-muted":               { "value": "{color.primitive.slate-700}" },
        "bg-accent":              { "value": "{color.primitive.slate-700}" },
        "bg-inverse":             { "value": "{color.primitive.offwhite}" },
        "border-default":         { "value": "{color.primitive.slate-700}" },
        "border-strong":          { "value": "{color.primitive.slate-600}" },
        "action-primary":         { "value": "{color.primitive.brass}" },
        "action-primary-hover":   { "value": "{color.primitive.brass-hover-dark}" },
        "action-primary-active":  { "value": "{color.primitive.brass-active}" },
        "action-primary-text":    { "value": "{color.primitive.slate}" },
        "action-secondary":       { "value": "{color.primitive.steel}" },
        "action-secondary-hover": { "value": "{color.primitive.steel-hover}" },
        "action-secondary-text":  { "value": "{color.primitive.white}" },
        "focus-ring":             { "value": "{color.primitive.brass}" }
      }
    },
    "status": {
      "success": { "bg": { "value": "#DCFCE7" }, "base": { "value": "#22C55E" }, "text": { "value": "#15803D" } },
      "warning": { "bg": { "value": "#FEF3C7" }, "base": { "value": "#D97706" }, "text": { "value": "#B45309" } },
      "error":   { "bg": { "value": "#FEE2E2" }, "base": { "value": "#DC2626" }, "text": { "value": "#B91C1C" } },
      "info":    { "bg": { "value": "#E8EFF5" }, "base": { "value": "#4E7CA1" }, "text": { "value": "#3B5F7D" } }
    },
    "chart": {
      "categorical": { "value": ["#4E7CA1", "#C8A35B", "#4F9D8C", "#8C6A93", "#C0795B", "#64748B"] },
      "sequential":  { "value": ["#ECF2F7", "#C2D5E3", "#8FB1CB", "#5E8BAC", "#3B5F7D"] },
      "diverging":   { "value": ["#B91C1C", "#F2B8B8", "#F1F5F9", "#A7E3BE", "#15803D"] }
    }
  },
  "font": {
    "family":     { "heading": { "value": "Bricolage Grotesque" }, "body": { "value": "DM Sans" } },
    "weight":     { "regular": { "value": "400" }, "medium": { "value": "500" }, "semibold": { "value": "600" }, "bold": { "value": "700" }, "extrabold": { "value": "800" } },
    "size":       { "display": { "value": "56px" }, "title": { "value": "32px" }, "heading": { "value": "22px" }, "subheading": { "value": "18px" }, "body": { "value": "16px" }, "small": { "value": "14px" }, "caption": { "value": "11px" } },
    "lineHeight": { "display": { "value": "0.95" }, "heading": { "value": "1.0" }, "body": { "value": "1.3" } }
  },
  "space":  { "2xs": { "value": "4px" }, "xs": { "value": "8px" }, "sm": { "value": "12px" }, "md": { "value": "16px" }, "lg": { "value": "24px" }, "xl": { "value": "32px" }, "2xl": { "value": "48px" }, "3xl": { "value": "64px" } },
  "radius": { "sm": { "value": "6px" }, "md": { "value": "8px" }, "lg": { "value": "12px" }, "xl": { "value": "20px" }, "full": { "value": "9999px" } },
  "breakpoint": { "sm": { "value": "375px" }, "md": { "value": "768px" }, "lg": { "value": "1024px" }, "xl": { "value": "1440px" } },
  "zIndex": { "base": { "value": "0" }, "dropdown": { "value": "1000" }, "sticky": { "value": "1100" }, "overlay": { "value": "1200" }, "modal": { "value": "1300" }, "popover": { "value": "1400" }, "toast": { "value": "1500" } },
  "elevation": {
    "sm": { "value": "0 1px 2px rgba(15,23,42,0.06)" },
    "md": { "value": "0 2px 8px rgba(15,23,42,0.08)" },
    "lg": { "value": "0 8px 24px rgba(15,23,42,0.12)" }
  },
  "motion": {
    "duration": { "fast": { "value": "120ms" }, "base": { "value": "180ms" }, "slow": { "value": "280ms" } },
    "easing":   { "value": "cubic-bezier(0.2,0,0,1)" },
    "pulse": {
      "duration":   { "value": "2.4s" },
      "easing":     { "value": "ease-out" },
      "iteration":  { "value": "infinite" },
      "ring": {
        "start": { "spread": { "value": "0 0 0 0" },   "alpha": { "value": "0.7" } },
        "end":   { "spread": { "value": "0 0 0 8px" }, "alpha": { "value": "0" } },
        "fadeBy":{ "value": "70%", "comment": "ring fully expanded & faded by 70% of the loop; remaining 30% is a rest beat" }
      },
      "comment": { "value": "Expanding box-shadow ring that radiates from a live/active status dot and fades, then rests before repeating. Colour inherits from the status the element carries. Pure CSS; honour prefers-reduced-motion." }
    }
  },
  "component": {
    "_comment": "Exact specs for the reusable brand components — the single source of truth that index.html, theme.css (.ic-* classes) and DESIGN.md spec tables all derive from. Colours reference primitives/semantics; dimensions are literal and checked against index.html by build-tokens.py.",
    "button": {
      "radius":        { "value": "7px" },
      "font-size":     { "value": "14px" },
      "font-weight":   { "value": "700" },
      "padding":       { "value": "11px 20px" },
      "padding-sm":    { "value": "8px 14px" },
      "font-size-sm":  { "value": "12.5px" },
      "padding-lg":    { "value": "14px 26px" },
      "font-size-lg":  { "value": "15px" },
      "focus-outline": { "value": "2px" },
      "focus-offset":  { "value": "2px" },
      "disabled-opacity": { "value": "0.4" },
      "primary":   { "bg": { "value": "{color.primitive.brass}" }, "text": { "value": "{color.primitive.slate}" }, "bg-hover": { "value": "{color.primitive.brass-hover}" }, "bg-active": { "value": "{color.primitive.brass-active}" } },
      "secondary": { "bg": { "value": "{color.primitive.steel}" }, "text": { "value": "{color.primitive.white}" }, "bg-hover": { "value": "{color.primitive.steel-hover}" } },
      "ghost":     { "bg": { "value": "transparent" }, "text": { "value": "{color.primitive.slate}" }, "border": { "value": "{color.primitive.slate-200}" }, "bg-hover": { "value": "{color.primitive.slate-100}" } }
    },
    "input": {
      "radius":       { "value": "7px" },
      "padding":      { "value": "10px 13px" },
      "font-size":    { "value": "14px" },
      "min-height-touch": { "value": "44px", "comment": "minimum tap target on mobile" },
      "ring-width":   { "value": "3px" },
      "focus-border": { "value": "{color.primitive.brass}" },
      "focus-ring":   { "value": "{color.primitive.brass-tint}" },
      "error-border": { "value": "{color.primitive.error}" },
      "error-ring":   { "value": "rgba(220,38,38,0.12)" }
    },
    "card": {
      "radius":       { "value": "12px" },
      "padding":      { "value": "24px" },
      "border-width": { "value": "1px" },
      "border":       { "value": "{color.primitive.slate-200}" },
      "bg":           { "value": "{color.primitive.white}" },
      "shadow":       { "value": "{elevation.sm}" }
    },
    "callout": {
      "radius":       { "value": "8px" },
      "padding":      { "value": "16px 20px" },
      "border-left":  { "value": "3px" },
      "border-color": { "value": "{color.primitive.brass}" },
      "bg":           { "value": "{color.primitive.brass-tint}" }
    },
    "pill": {
      "radius":      { "value": "9999px" },
      "padding":     { "value": "9px 17px 9px 15px" },
      "gap":         { "value": "10px" },
      "dot-size":    { "value": "9px" },
      "font-size":   { "value": "11px" },
      "font-weight": { "value": "500" }
    },
    "banner": {
      "radius":      { "value": "10px" },
      "padding":     { "value": "13px 15px" },
      "gap":         { "value": "11px" },
      "font-size":   { "value": "13.5px" }
    },
    "skeleton": {
      "radius":           { "value": "6px" },
      "shimmer-duration": { "value": "1.4s" },
      "base":             { "value": "{color.primitive.slate-100}" },
      "highlight":        { "value": "#E9EEF3" }
    },
    "nav": {
      "_comment": "Active-location indicator by surface — see DESIGN.md Appendix C.",
      "active-line":      { "value": "2px", "comment": "brass left-edge line on sidebar rows & mega-menu items; follows corner radius via inset box-shadow" },
      "active-underline": { "value": "2px", "comment": "brass underline on top-bar links & tabs" },
      "active-bg":        { "value": "{color.primitive.brass-tint}" },
      "tab-underline":    { "value": "3px" }
    }
  }
}