{
  "button": {
    "size": {
      "xs": { "height": { "$value": "{size.control.xs}", "$type": "dimension" }, "padding-x": { "$value": "{spacing.3}", "$type": "dimension" }, "font-size": { "$value": "{font-size.2xs}", "$type": "dimension" } },
      "sm": { "height": { "$value": "{size.control.sm}", "$type": "dimension" }, "padding-x": { "$value": "{spacing.4}", "$type": "dimension" }, "font-size": { "$value": "{font-size.xs}",  "$type": "dimension" } },
      "md": { "height": { "$value": "{size.control.md}", "$type": "dimension" }, "padding-x": { "$value": "{spacing.5}", "$type": "dimension" }, "font-size": { "$value": "{font-size.sm}",  "$type": "dimension" } },
      "lg": { "height": { "$value": "{size.control.lg}", "$type": "dimension" }, "padding-x": { "$value": "{spacing.6}", "$type": "dimension" }, "font-size": { "$value": "{font-size.md}",  "$type": "dimension" } },
      "xl": { "height": { "$value": "{size.control.xl}", "$type": "dimension" }, "padding-x": { "$value": "{spacing.8}", "$type": "dimension" }, "font-size": { "$value": "{font-size.md}",  "$type": "dimension" } }
    },
    "radius":      { "$value": "{radius.control}", "$type": "dimension" },
    "font-weight": { "$value": "{font-weight.semibold}", "$type": "fontWeight" },
    "transition":  { "$value": "{motion.fast}", "$type": "transition" },

    "primary": {
      "$description": "Highest-emphasis CTA — used for the most important action on a page (Add to cart, Submit). Gold/accent.",
      "bg":         { "$value": "{color.accent.default}", "$type": "color" },
      "bg-hover":   { "$value": "{color.accent.hover}",   "$type": "color" },
      "fg":         { "$value": "{color.text.default}",   "$type": "color" }
    },
    "brand": {
      "$description": "Secondary high-emphasis — brand-blue solid. Used when primary is reserved or alongside a primary.",
      "bg":         { "$value": "{color.brand.default}", "$type": "color" },
      "bg-hover":   { "$value": "{color.brand.hover}",   "$type": "color" },
      "fg":         { "$value": "{color.text.inverted}", "$type": "color" }
    },
    "outline": {
      "$description": "Brand-bordered, transparent fill. For secondary actions where solid color would be too heavy.",
      "bg":         { "$value": "transparent", "$type": "color" },
      "bg-hover":   { "$value": "{color.alpha.brand.06}", "$type": "color" },
      "fg":         { "$value": "{color.brand.default}",  "$type": "color" },
      "border":     { "$value": "{color.brand.default}",  "$type": "color" },
      "border-width": { "$value": "{border-width.med}",   "$type": "dimension" }
    },
    "outline-light": {
      "$description": "Inverse outline — for use over dark surfaces.",
      "bg":         { "$value": "transparent", "$type": "color" },
      "bg-hover":   { "$value": "{color.alpha.white.10}", "$type": "color" },
      "fg":         { "$value": "{color.text.inverted}",  "$type": "color" },
      "border":     { "$value": "{color.alpha.white.50}", "$type": "color" }
    },
    "ghost": {
      "$description": "Tertiary action — soft border, text-only emphasis.",
      "bg":         { "$value": "transparent", "$type": "color" },
      "bg-hover":   { "$value": "{color.surface.subtle}", "$type": "color" },
      "fg":         { "$value": "{color.text.subtle}",    "$type": "color" },
      "border":     { "$value": "{color.border.default}", "$type": "color" }
    },
    "text": {
      "$description": "Inline button styled like a link. No padding, no background.",
      "fg":         { "$value": "{color.brand.default}", "$type": "color" }
    },
    "danger": {
      "bg":         { "$value": "{color.feedback.error.default}", "$type": "color" },
      "bg-hover":   { "$value": "{color.feedback.error.hover}",   "$type": "color" },
      "fg":         { "$value": "{color.text.inverted}", "$type": "color" }
    }
  },

  "input": {
    "height":        { "$value": "{size.control.md}", "$type": "dimension" },
    "padding-x":     { "$value": "{spacing.4}", "$type": "dimension" },
    "radius":        { "$value": "{radius.control}", "$type": "dimension" },
    "font-size":     { "$value": "{font-size.sm}", "$type": "dimension" },
    "bg":            { "$value": "{color.surface.default}", "$type": "color" },
    "fg":            { "$value": "{color.text.default}", "$type": "color" },
    "placeholder":   { "$value": "{color.text.muted}", "$type": "color" },
    "border":        { "$value": "{color.border.default}", "$type": "color" },
    "border-focus":  { "$value": "{color.border.brand}", "$type": "color" },
    "ring-focus":    { "$value": "{color.alpha.brand.10}", "$type": "color" },
    "transition":    { "$value": "{motion.fast}", "$type": "transition" }
  },

  "card": {
    "bg":            { "$value": "{color.surface.default}", "$type": "color" },
    "border":        { "$value": "{color.border.default}", "$type": "color" },
    "border-hover":  { "$value": "{color.border.strong}",  "$type": "color" },
    "radius":        { "$value": "{radius.card}", "$type": "dimension" },
    "padding":       { "$value": "{spacing.4}", "$type": "dimension" },
    "shadow-rest":   { "$value": "{elevation.rest}", "$type": "shadow" },
    "shadow-hover":  { "$value": "{elevation.raised}", "$type": "shadow" },
    "transition":    { "$value": "{motion.base}", "$type": "transition" }
  },

  "product-card": {
    "image-bg":      { "$value": "{color.surface.subtle}", "$type": "color" },
    "image-padding": { "$value": "{spacing.4}", "$type": "dimension" },
    "badge-radius":  { "$value": "{radius.tag}", "$type": "dimension" },
    "badge-oem-bg":  { "$value": "{color.brand.default}", "$type": "color" },
    "badge-oem-fg":  { "$value": "{color.text.inverted}", "$type": "color" },
    "badge-sub-bg":  { "$value": "{color.accent.default}", "$type": "color" },
    "badge-sub-fg":  { "$value": "{color.text.default}", "$type": "color" },
    "badge-new-bg":  { "$value": "{color.gray.900}", "$type": "color" },
    "badge-new-fg":  { "$value": "{color.text.inverted}", "$type": "color" },
    "name-color":    { "$value": "{color.text.default}", "$type": "color" },
    "name-hover":    { "$value": "{color.brand.default}", "$type": "color" },
    "sku-color":     { "$value": "{color.text.muted}", "$type": "color" },
    "price-color":   { "$value": "{color.text.default}", "$type": "color" },
    "footer-border": { "$value": "{color.border.subtle}", "$type": "color" }
  },

  "machine-card": {
    "image-bg":      { "$value": "{color.surface.dark}", "$type": "color" },
    "image-aspect":  { "$value": "4 / 3", "$type": "string" },
    "border-hover":  { "$value": "{color.border.brand}", "$type": "color" },
    "due-bg":        { "$value": "{color.surface.subtle}", "$type": "color" },
    "due-overdue-bg":{ "$value": "{color.feedback.error.surface}", "$type": "color" },
    "due-overdue-fg":{ "$value": "{color.feedback.error.default}", "$type": "color" },
    "due-ok-bg":     { "$value": "{color.feedback.success.surface}", "$type": "color" },
    "due-ok-fg":     { "$value": "{color.feedback.success.default}", "$type": "color" }
  },

  "pill": {
    "$description": "Status pill. Two-axis variant: tone (success/warning/error/brand/neutral/accent) × emphasis. Default emphasis is subtle (light bg, dark text).",
    "padding-y":   { "$value": "2px",          "$type": "dimension" },
    "padding-x":   { "$value": "{spacing.2}",  "$type": "dimension" },
    "radius":      { "$value": "{radius.pill}", "$type": "dimension" },
    "font-size":   { "$value": "{font-size.2xs}", "$type": "dimension" },
    "font-weight": { "$value": "{font-weight.semibold}", "$type": "fontWeight" },
    "letter-spacing": { "$value": "{letter-spacing.wide}", "$type": "dimension" },
    "tone": {
      "success":  { "bg": { "$value": "{color.feedback.success.surface}", "$type": "color" }, "fg": { "$value": "{color.feedback.success.default}", "$type": "color" } },
      "warning":  { "bg": { "$value": "{color.feedback.warning.surface}", "$type": "color" }, "fg": { "$value": "{color.feedback.warning.default}", "$type": "color" } },
      "error":    { "bg": { "$value": "{color.feedback.error.surface}",   "$type": "color" }, "fg": { "$value": "{color.feedback.error.default}",   "$type": "color" } },
      "brand":    { "bg": { "$value": "{color.alpha.brand.08}",           "$type": "color" }, "fg": { "$value": "{color.brand.default}",            "$type": "color" } },
      "neutral":  { "bg": { "$value": "{color.surface.muted}",            "$type": "color" }, "fg": { "$value": "{color.text.subtle}",              "$type": "color" } },
      "accent":   { "bg": { "$value": "{color.alpha.accent.15}",          "$type": "color" }, "fg": { "$value": "{color.accent.deep}",              "$type": "color" } },
      "dark":     { "bg": { "$value": "{color.text.default}",             "$type": "color" }, "fg": { "$value": "{color.text.inverted}",            "$type": "color" } }
    }
  },

  "stock-badge": {
    "$description": "Specialized variant of pill for stock status. Smaller, square radius, all-caps.",
    "padding-y":   { "$value": "2px",         "$type": "dimension" },
    "padding-x":   { "$value": "{spacing.2}", "$type": "dimension" },
    "radius":      { "$value": "{radius.tag}", "$type": "dimension" },
    "font-size":   { "$value": "{font-size.3xs}", "$type": "dimension", "$description": "10px (D21)" },
    "letter-spacing": { "$value": "{letter-spacing.wide}", "$type": "dimension" },
    "in":      { "bg": { "$value": "{color.feedback.stock.in-bg}",   "$type": "color" }, "fg": { "$value": "{color.feedback.stock.in}",   "$type": "color" } },
    "low":     { "bg": { "$value": "{color.feedback.stock.low-bg}",  "$type": "color" }, "fg": { "$value": "{color.feedback.stock.low}",  "$type": "color" } },
    "out":     { "bg": { "$value": "{color.feedback.stock.out-bg}",  "$type": "color" }, "fg": { "$value": "{color.feedback.stock.out}",  "$type": "color" } },
    "back":    { "bg": { "$value": "{color.feedback.stock.back-bg}", "$type": "color" }, "fg": { "$value": "{color.feedback.stock.back}", "$type": "color" } }
  },

  "alert": {
    "padding":     { "$value": "{spacing.4}",  "$type": "dimension" },
    "radius":      { "$value": "{radius.card}", "$type": "dimension" },
    "font-size":   { "$value": "{font-size.xs}", "$type": "dimension" },
    "tone": {
      "info":     { "bg": { "$value": "{color.feedback.info.surface}",    "$type": "color" }, "fg": { "$value": "{color.feedback.info.text}",    "$type": "color" }, "border": { "$value": "{color.feedback.info.border}",    "$type": "color" } },
      "success":  { "bg": { "$value": "{color.feedback.success.surface}", "$type": "color" }, "fg": { "$value": "{color.feedback.success.text}", "$type": "color" }, "border": { "$value": "{color.feedback.success.border}", "$type": "color" } },
      "warning":  { "bg": { "$value": "{color.feedback.warning.surface}", "$type": "color" }, "fg": { "$value": "{color.feedback.warning.text}", "$type": "color" }, "border": { "$value": "{color.feedback.warning.border}", "$type": "color" } },
      "brand":    { "bg": { "$value": "{color.alpha.brand.06}",           "$type": "color" }, "fg": { "$value": "{color.brand.default}",         "$type": "color" }, "border": { "$value": "{color.alpha.brand.20}",          "$type": "color" } }
    }
  },

  "qty-stepper": {
    "$description": "Quantity selector. Two sizes: default (32px) for product cards/bundle rows, large (52px) for PDP main ATC.",
    "default": {
      "height":     { "$value": "32px",  "$type": "dimension" },
      "btn-width":  { "$value": "32px",  "$type": "dimension" },
      "input-width":{ "$value": "44px",  "$type": "dimension" }
    },
    "large": {
      "height":     { "$value": "{size.control.lg}", "$type": "dimension" },
      "btn-width":  { "$value": "40px",  "$type": "dimension" },
      "input-width":{ "$value": "56px",  "$type": "dimension" }
    },
    "btn-bg":       { "$value": "{color.surface.subtle}", "$type": "color" },
    "btn-bg-hover": { "$value": "{color.surface.muted}",  "$type": "color" },
    "border":       { "$value": "{color.border.default}", "$type": "color" },
    "radius":       { "$value": "{radius.control}",       "$type": "dimension" }
  },

  "tab": {
    "padding-y":     { "$value": "{spacing.3}", "$type": "dimension" },
    "padding-x":     { "$value": "{spacing.5}", "$type": "dimension" },
    "border-width":  { "$value": "{border-width.thick}", "$type": "dimension" },
    "fg":            { "$value": "{color.text.subtle}", "$type": "color" },
    "fg-hover":      { "$value": "{color.text.default}", "$type": "color" },
    "fg-active":     { "$value": "{color.brand.default}", "$type": "color" },
    "border-active": { "$value": "{color.brand.default}", "$type": "color" }
  },

  "header": {
    "$description": "Site header (logo + search + actions).",
    "height":      { "$value": "{size.header-height.large}", "$type": "dimension", "$description": "Default header height (large breakpoint). Component CSS overrides at smaller breakpoints via media queries." },
    "bg":          { "$value": "{color.surface.default}", "$type": "color" },
    "logo-height": { "$value": "52px", "$type": "dimension" }
  },

  "announcement-bar": {
    "bg":         { "$value": "{color.surface.inverted}", "$type": "color" },
    "fg":         { "$value": "{color.alpha.white.85}",   "$type": "color" },
    "phone-fg":   { "$value": "{color.accent.default}",   "$type": "color" },
    "padding-y":  { "$value": "{spacing.2}", "$type": "dimension" },
    "font-size":  { "$value": "{font-size.2xs}", "$type": "dimension" }
  },

  "primary-nav": {
    "height":     { "$value": "44px", "$type": "dimension" },
    "bg":         { "$value": "{color.surface.default}", "$type": "color" },
    "border":     { "$value": "{color.border.default}", "$type": "color" },
    "item-fg":    { "$value": "{color.brand.default}", "$type": "color" },
    "item-bg-active": { "$value": "{color.surface.subtle}", "$type": "color" }
  },

  "footer": {
    "bg":         { "$value": "{color.surface.inverted}", "$type": "color" },
    "fg":         { "$value": "{color.alpha.white.85}",   "$type": "color" },
    "fg-muted":   { "$value": "{color.alpha.white.40}",   "$type": "color" },
    "padding-y":  { "$value": "{spacing.16}", "$type": "dimension" }
  },

  "dropdown": {
    "min-width":  { "$value": "180px", "$type": "dimension" },
    "bg":         { "$value": "{color.surface.default}", "$type": "color" },
    "border":     { "$value": "{color.border.default}", "$type": "color" },
    "radius":     { "$value": "{radius.card}", "$type": "dimension" },
    "shadow":     { "$value": "{elevation.overlay}", "$type": "shadow" },
    "item-fg":    { "$value": "{color.text.default}", "$type": "color" },
    "item-bg-hover": { "$value": "{color.surface.subtle}", "$type": "color" }
  },

  "section-header": {
    "label-color": { "$value": "{color.text.muted}", "$type": "color" },
    "title-color": { "$value": "{color.text.default}", "$type": "color" },
    "desc-color":  { "$value": "{color.text.subtle}", "$type": "color" },
    "link-color":  { "$value": "{color.brand.default}", "$type": "color" }
  }
}