{
  "$description": "Proof of Work design tokens (W3C DTCG). Extracted document-as-is from the as-built Tailwind UI on 2026-06-19; red accent (#DC2626) and the two-tier radius rule are owner-driven. Neutral ramp is Tailwind 'zinc'. Hexes are the literal Tailwind values the code already uses.",
  "color": {
    "bg": {
      "canvas": { "$type": "color", "$value": "#0A0A0A", "$description": "App background; PWA theme_color and <body> bg. The anchor value." },
      "surface": { "$type": "color", "$value": "#18181B", "$description": "zinc-900 — default raised surface (cards, panels)." },
      "raised": { "$type": "color", "$value": "#27272A", "$description": "zinc-800 — controls, chips, next step up / hover." },
      "inset": { "$type": "color", "$value": "#09090B", "$description": "zinc-950 — rare deep wells, slightly below canvas." }
    },
    "border": {
      "subtle": { "$type": "color", "$value": "#27272A", "$description": "zinc-800 — default hairline." },
      "default": { "$type": "color", "$value": "#3F3F46", "$description": "zinc-700." },
      "strong": { "$type": "color", "$value": "#52525B", "$description": "zinc-600 — emphasis/hover." }
    },
    "text": {
      "primary": { "$type": "color", "$value": "#FFFFFF" },
      "secondary": { "$type": "color", "$value": "#A1A1AA", "$description": "zinc-400." },
      "muted": { "$type": "color", "$value": "#71717A", "$description": "zinc-500." },
      "subtle": { "$type": "color", "$value": "#52525B", "$description": "zinc-600 — disabled/least emphasis." },
      "inverted": { "$type": "color", "$value": "#000000", "$description": "Text on white/light surfaces (primary button)." }
    },
    "accent": {
      "red": { "$type": "color", "$value": "#DC2626", "$description": "Canonical red — brand accent AND error/destructive (red-600). Distinguished by treatment, not by a second red." },
      "red-strong": { "$type": "color", "$value": "#B91C1C", "$description": "red-700 — hover/pressed for the accent." },
      "red-text": { "$type": "color", "$value": "#F87171", "$description": "red-400 — red text/icon on the dark canvas." },
      "red-border": { "$type": "color", "$value": "#991B1B", "$description": "red-800 — error/destructive outlines." },
      "red-wash": { "$type": "color", "$value": "rgba(127, 29, 29, 0.30)", "$description": "red-900/30 — error banner / destructive-hover background wash." }
    },
    "state": {
      "success": { "$type": "color", "$value": "#34D399", "$description": "emerald-400 — success text/icon on dark." },
      "success-fill": { "$type": "color", "$value": "#059669", "$description": "emerald-600 — success fill." },
      "warning": { "$type": "color", "$value": "#FBBF24", "$description": "amber-400 — warning text/icon." },
      "warning-edge": { "$type": "color", "$value": "#78350F", "$description": "amber-900 — warning border/wash edge." },
      "info": { "$type": "color", "$value": "#60A5FA", "$description": "blue-400 — info text (used sparingly)." },
      "info-wash": { "$type": "color", "$value": "#172554", "$description": "blue-950 — info wash background." }
    },
    "action": {
      "primary-bg": { "$type": "color", "$value": "{color.text.primary}", "$description": "Primary button background is WHITE — not a hue." },
      "primary-text": { "$type": "color", "$value": "{color.text.inverted}" },
      "primary-hover-bg": { "$type": "color", "$value": "#E4E4E7", "$description": "zinc-200." },
      "primary-disabled-bg": { "$type": "color", "$value": "#3F3F46", "$description": "zinc-700." },
      "primary-disabled-text": { "$type": "color", "$value": "#71717A", "$description": "zinc-500." }
    }
  },
  "font": {
    "family": {
      "display": { "$type": "fontFamily", "$value": "Bebas Neue", "$description": "var(--font-display). Headings, buttons, labels — always UPPERCASE + tracked." },
      "body": { "$type": "fontFamily", "$value": "Space Grotesk", "$description": "var(--font-sans). All running text, data, numbers." }
    },
    "size": {
      "xs": { "$type": "dimension", "$value": "12px" },
      "sm": { "$type": "dimension", "$value": "14px" },
      "base": { "$type": "dimension", "$value": "16px" },
      "lg": { "$type": "dimension", "$value": "18px" },
      "xl": { "$type": "dimension", "$value": "20px" },
      "2xl": { "$type": "dimension", "$value": "24px" },
      "3xl": { "$type": "dimension", "$value": "30px" },
      "4xl": { "$type": "dimension", "$value": "36px" }
    },
    "weight": {
      "normal": { "$type": "fontWeight", "$value": 400 },
      "medium": { "$type": "fontWeight", "$value": 500 },
      "semibold": { "$type": "fontWeight", "$value": 600 },
      "bold": { "$type": "fontWeight", "$value": 700 }
    },
    "letterSpacing": {
      "wider": { "$type": "dimension", "$value": "0.05em", "$description": "Tailwind tracking-wider — the signature pairing with UPPERCASE Bebas." }
    }
  },
  "space": {
    "$description": "Tailwind 4px scale; the values the as-built UI leans on.",
    "1": { "$type": "dimension", "$value": "4px" },
    "2": { "$type": "dimension", "$value": "8px" },
    "3": { "$type": "dimension", "$value": "12px" },
    "4": { "$type": "dimension", "$value": "16px" },
    "5": { "$type": "dimension", "$value": "20px" },
    "6": { "$type": "dimension", "$value": "24px" },
    "8": { "$type": "dimension", "$value": "32px" }
  },
  "radius": {
    "control": { "$type": "dimension", "$value": "4px", "$description": "Tailwind `rounded` — buttons, inputs, chips." },
    "container": { "$type": "dimension", "$value": "8px", "$description": "Tailwind `rounded-lg` — cards, panels, modals, banners." },
    "full": { "$type": "dimension", "$value": "9999px", "$description": "Pills, avatars, dots." }
  },
  "size": {
    "sidebar-width": { "$type": "dimension", "$value": "240px", "$description": "CSS var --sidebar-width; desktop sidebar (md+)." },
    "nav-height": { "$type": "dimension", "$value": "64px", "$description": "CSS var --nav-height." },
    "bottom-nav-height": { "$type": "dimension", "$value": "64px", "$description": "CSS var --bottom-nav-height; mobile bottom nav." }
  },
  "shadow": {
    "overlay": { "$type": "shadow", "$value": "0 10px 15px -3px rgba(0,0,0,0.5)", "$description": "Reserved for floating overlays ONLY (modals, popovers). Static cards use bg layering + borders, never a shadow. Value approximates Tailwind shadow-lg; the codebase also uses shadow-xl/2xl for overlays." }
  }
}
