{
  "primitives": {
    "color": {
      "blue": {
        "50": {
          "$value": "#eef1fa",
          "$type": "color",
          "$description": "Brand-tinted background for cards, banners, callouts"
        },
        "100": {
          "$value": "#dbe2f5",
          "$type": "color",
          "$description": "Soft brand surface"
        },
        "200": {
          "$value": "#b6c4eb",
          "$type": "color"
        },
        "300": {
          "$value": "#7d92d6",
          "$type": "color"
        },
        "500": {
          "$value": "#1e44c4",
          "$type": "color"
        },
        "700": {
          "$value": "#0021a6",
          "$type": "color",
          "$description": "USA Clean primary brand blue"
        },
        "800": {
          "$value": "#001580",
          "$type": "color",
          "$description": "Brand blue, hover/pressed"
        },
        "900": {
          "$value": "#0d1a4d",
          "$type": "color",
          "$description": "Deep navy used in announcement bar and footer (semantic: brand.deep)"
        }
      },
      "gold": {
        "50": {
          "$value": "#fff8e6",
          "$type": "color"
        },
        "100": {
          "$value": "#ffeac1",
          "$type": "color"
        },
        "300": {
          "$value": "#f7c25a",
          "$type": "color"
        },
        "500": {
          "$value": "#efaa22",
          "$type": "color",
          "$description": "USA Clean accent gold"
        },
        "600": {
          "$value": "#d8951a",
          "$type": "color",
          "$description": "Accent gold, hover"
        },
        "700": {
          "$value": "#8b5a00",
          "$type": "color",
          "$description": "Deep gold for accent text on light surfaces. WCAG 2.2 AA: 5.93:1 vs white, 5.0:1 vs gold-tinted surface (passes 4.5:1)."
        }
      },
      "gray": {
        "0": {
          "$value": "#ffffff",
          "$type": "color",
          "$description": "Page background"
        },
        "50": {
          "$value": "#f5f7fa",
          "$type": "color",
          "$description": "Subtle surface (consolidated — replaces former #f5f5f5)"
        },
        "150": {
          "$value": "#f4f5f7",
          "$type": "color",
          "$description": "Search bar background — slightly different from gray.50, kept separate"
        },
        "200": {
          "$value": "#ececec",
          "$type": "color",
          "$description": "Muted surface, also used as subtle border"
        },
        "300": {
          "$value": "#d9d9d9",
          "$type": "color",
          "$description": "Default border, also used for placeholder strokes"
        },
        "400": {
          "$value": "#c0c0c0",
          "$type": "color",
          "$description": "Card hover border"
        },
        "500": {
          "$value": "#757575",
          "$type": "color",
          "$description": "Muted text"
        },
        "600": {
          "$value": "#5d5d5d",
          "$type": "color",
          "$description": "Subtle text"
        },
        "700": {
          "$value": "#3a3a3a",
          "$type": "color"
        },
        "800": {
          "$value": "#222222",
          "$type": "color",
          "$description": "Secondary text"
        },
        "900": {
          "$value": "#131313",
          "$type": "color",
          "$description": "Default body text, also used for solid black contexts (badges)"
        },
        "950": {
          "$value": "#1b252d",
          "$type": "color",
          "$description": "Dark surface (machine card image bg)"
        }
      },
      "green": {
        "50": {
          "$value": "#e6f7e6",
          "$type": "color",
          "$description": "Success surface"
        },
        "100": {
          "$value": "#e6f4ea",
          "$type": "color",
          "$description": "Success surface — bundle docs variant (slight green-blue lean)"
        },
        "300": {
          "$value": "#86efac",
          "$type": "color",
          "$description": "Success border"
        },
        "500": {
          "$value": "#00a900",
          "$type": "color",
          "$description": "Success"
        },
        "800": {
          "$value": "#15692a",
          "$type": "color",
          "$description": "Canonical success text on light backgrounds (WCAG AA)"
        }
      },
      "amber": {
        "50": {
          "$value": "#fff7e6",
          "$type": "color",
          "$description": "Warning surface"
        },
        "75": {
          "$value": "#fff4dc",
          "$type": "color",
          "$description": "Warning surface — bundle docs callout variant"
        },
        "300": {
          "$value": "#fde68a",
          "$type": "color",
          "$description": "Warning border"
        },
        "500": {
          "$value": "#d97706",
          "$type": "color",
          "$description": "Warning"
        },
        "700": {
          "$value": "#92400e",
          "$type": "color",
          "$description": "Canonical warning text on light backgrounds (WCAG AA)"
        }
      },
      "red": {
        "50": {
          "$value": "#fef2f2",
          "$type": "color",
          "$description": "Error surface"
        },
        "100": {
          "$value": "#fbe9eb",
          "$type": "color",
          "$description": "Error surface — bundle docs callout variant"
        },
        "500": {
          "$value": "#c70e1d",
          "$type": "color",
          "$description": "Error"
        },
        "600": {
          "$value": "#a80c18",
          "$type": "color",
          "$description": "Error, hover"
        },
        "800": {
          "$value": "#991b1b",
          "$type": "color",
          "$description": "Canonical error text on light backgrounds (WCAG AA)"
        }
      },
      "indigo": {
        "50": {
          "$value": "#eff6ff",
          "$type": "color",
          "$description": "Info surface"
        },
        "300": {
          "$value": "#bfdbfe",
          "$type": "color",
          "$description": "Info border"
        },
        "700": {
          "$value": "#1e40af",
          "$type": "color",
          "$description": "Info text"
        }
      },
      "alpha": {
        "brand": {
          "10": {
            "$value": "rgba(0, 33, 166, 0.10)",
            "$type": "color",
            "$description": "Input focus ring"
          },
          "20": {
            "$value": "rgba(0, 33, 166, 0.20)",
            "$type": "color",
            "$description": "Brand alert border"
          },
          "04": {
            "$value": "rgba(0, 33, 166, 0.04)",
            "$type": "color",
            "$description": "Brand wash — compat checker header"
          },
          "06": {
            "$value": "rgba(0, 33, 166, 0.06)",
            "$type": "color",
            "$description": "Brand wash — outline button hover"
          },
          "08": {
            "$value": "rgba(0, 33, 166, 0.08)",
            "$type": "color",
            "$description": "Brand wash — pill-brand bg"
          }
        },
        "accent": {
          "15": {
            "$value": "rgba(239, 170, 34, 0.15)",
            "$type": "color",
            "$description": "Accent wash — pill-accent bg"
          },
          "18": {
            "$value": "rgba(239, 170, 34, 0.18)",
            "$type": "color"
          }
        },
        "white": {
          "10": {
            "$value": "rgba(255, 255, 255, 0.10)",
            "$type": "color",
            "$description": "Footer email field bg"
          },
          "20": {
            "$value": "rgba(255, 255, 255, 0.20)",
            "$type": "color",
            "$description": "Footer email field border"
          },
          "40": {
            "$value": "rgba(255, 255, 255, 0.40)",
            "$type": "color"
          },
          "50": {
            "$value": "rgba(255, 255, 255, 0.50)",
            "$type": "color",
            "$description": "Outline-light button border"
          },
          "70": {
            "$value": "rgba(255, 255, 255, 0.70)",
            "$type": "color"
          },
          "85": {
            "$value": "rgba(255, 255, 255, 0.85)",
            "$type": "color",
            "$description": "Wishlist button bg over images"
          }
        },
        "black": {
          "10": {
            "$value": "rgba(0, 0, 0, 0.10)",
            "$type": "color",
            "$description": "Shadow md alpha"
          },
          "12": {
            "$value": "rgba(0, 0, 0, 0.12)",
            "$type": "color",
            "$description": "Shadow lg alpha"
          },
          "14": {
            "$value": "rgba(0, 0, 0, 0.14)",
            "$type": "color",
            "$description": "Shadow xl alpha"
          },
          "50": {
            "$value": "rgba(0, 0, 0, 0.50)",
            "$type": "color",
            "$description": "Machine card overflow button bg"
          },
          "06": {
            "$value": "rgba(0, 0, 0, 0.06)",
            "$type": "color",
            "$description": "Shadow xs alpha"
          },
          "08": {
            "$value": "rgba(0, 0, 0, 0.08)",
            "$type": "color",
            "$description": "Shadow sm alpha"
          }
        }
      }
    },
    "spacing": {
      "0": {
        "$value": "0",
        "$type": "dimension"
      },
      "1": {
        "$value": "0.25rem",
        "$type": "dimension",
        "$description": "4px"
      },
      "2": {
        "$value": "0.5rem",
        "$type": "dimension",
        "$description": "8px"
      },
      "3": {
        "$value": "0.75rem",
        "$type": "dimension",
        "$description": "12px"
      },
      "4": {
        "$value": "1rem",
        "$type": "dimension",
        "$description": "16px"
      },
      "5": {
        "$value": "1.25rem",
        "$type": "dimension",
        "$description": "20px"
      },
      "6": {
        "$value": "1.5rem",
        "$type": "dimension",
        "$description": "24px"
      },
      "8": {
        "$value": "2rem",
        "$type": "dimension",
        "$description": "32px"
      },
      "10": {
        "$value": "2.5rem",
        "$type": "dimension",
        "$description": "40px"
      },
      "12": {
        "$value": "3rem",
        "$type": "dimension",
        "$description": "48px"
      },
      "16": {
        "$value": "4rem",
        "$type": "dimension",
        "$description": "64px"
      },
      "20": {
        "$value": "5rem",
        "$type": "dimension",
        "$description": "80px"
      },
      "24": {
        "$value": "6rem",
        "$type": "dimension",
        "$description": "96px"
      },
      "32": {
        "$value": "8rem",
        "$type": "dimension",
        "$description": "128px"
      }
    },
    "radius": {
      "0": {
        "$value": "0",
        "$type": "dimension"
      },
      "xs": {
        "$value": "3px",
        "$type": "dimension",
        "$description": "Small badge / stock pill"
      },
      "sm": {
        "$value": "4px",
        "$type": "dimension"
      },
      "md": {
        "$value": "8px",
        "$type": "dimension"
      },
      "lg": {
        "$value": "12px",
        "$type": "dimension"
      },
      "xl": {
        "$value": "16px",
        "$type": "dimension"
      },
      "full": {
        "$value": "9999px",
        "$type": "dimension",
        "$description": "Pills, avatars, fully rounded"
      }
    },
    "border-width": {
      "0": {
        "$value": "0",
        "$type": "dimension"
      },
      "thin": {
        "$value": "1px",
        "$type": "dimension"
      },
      "med": {
        "$value": "1.5px",
        "$type": "dimension",
        "$description": "Outline button border"
      },
      "thick": {
        "$value": "2px",
        "$type": "dimension",
        "$description": "Tab underline, focus"
      }
    },
    "shadow": {
      "xs": {
        "$value": "0 1px 2px {color.alpha.black.06}",
        "$type": "shadow"
      },
      "sm": {
        "$value": "0 1px 4px {color.alpha.black.08}",
        "$type": "shadow"
      },
      "md": {
        "$value": "0 4px 12px {color.alpha.black.10}",
        "$type": "shadow"
      },
      "lg": {
        "$value": "0 8px 24px {color.alpha.black.12}",
        "$type": "shadow"
      },
      "xl": {
        "$value": "0 16px 40px {color.alpha.black.14}",
        "$type": "shadow"
      }
    },
    "font-family": {
      "sans": {
        "$value": "'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
        "$type": "fontFamily",
        "$description": "Default. Open Sans loaded from Google Fonts."
      },
      "mono": {
        "$value": "ui-monospace, SFMono-Regular, Menlo, monospace",
        "$type": "fontFamily",
        "$description": "Code, SKUs, technical specs"
      }
    },
    "font-weight": {
      "regular": {
        "$value": 400,
        "$type": "fontWeight"
      },
      "medium": {
        "$value": 500,
        "$type": "fontWeight"
      },
      "semibold": {
        "$value": 600,
        "$type": "fontWeight"
      },
      "bold": {
        "$value": 700,
        "$type": "fontWeight"
      },
      "extrabold": {
        "$value": 800,
        "$type": "fontWeight",
        "$description": "Used sparingly — bundle totals, key metrics"
      }
    },
    "font-size": {
      "3xs": {
        "$value": "0.625rem",
        "$type": "dimension",
        "$description": "10px — stock badges, smallest labels (added per D21)"
      },
      "2xs": {
        "$value": "0.75rem",
        "$type": "dimension",
        "$description": "12px"
      },
      "xs": {
        "$value": "0.875rem",
        "$type": "dimension",
        "$description": "14px"
      },
      "sm": {
        "$value": "1rem",
        "$type": "dimension",
        "$description": "16px (body default)"
      },
      "md": {
        "$value": "1.125rem",
        "$type": "dimension",
        "$description": "18px"
      },
      "lg": {
        "$value": "1.25rem",
        "$type": "dimension",
        "$description": "20px"
      },
      "xl": {
        "$value": "1.5rem",
        "$type": "dimension",
        "$description": "24px"
      },
      "2xl": {
        "$value": "2rem",
        "$type": "dimension",
        "$description": "32px"
      },
      "3xl": {
        "$value": "2.5rem",
        "$type": "dimension",
        "$description": "40px"
      },
      "4xl": {
        "$value": "3rem",
        "$type": "dimension",
        "$description": "48px"
      },
      "5xl": {
        "$value": "3.5rem",
        "$type": "dimension",
        "$description": "56px — display hero"
      }
    },
    "line-height": {
      "tight": {
        "$value": 1.2,
        "$type": "number"
      },
      "snug": {
        "$value": 1.3,
        "$type": "number"
      },
      "normal": {
        "$value": 1.4,
        "$type": "number"
      },
      "relaxed": {
        "$value": 1.5,
        "$type": "number"
      },
      "loose": {
        "$value": 1.65,
        "$type": "number",
        "$description": "Long-form prose (docs, briefs)"
      }
    },
    "letter-spacing": {
      "tighter": {
        "$value": "-0.02em",
        "$type": "dimension"
      },
      "tight": {
        "$value": "-0.01em",
        "$type": "dimension"
      },
      "normal": {
        "$value": "0",
        "$type": "dimension"
      },
      "wide": {
        "$value": "0.03em",
        "$type": "dimension",
        "$description": "Pill labels"
      },
      "wider": {
        "$value": "0.05em",
        "$type": "dimension",
        "$description": "Eyebrows, small caps"
      },
      "widest": {
        "$value": "0.08em",
        "$type": "dimension",
        "$description": "Section header labels"
      }
    },
    "duration": {
      "instant": {
        "$value": "0ms",
        "$type": "duration"
      },
      "fast": {
        "$value": "120ms",
        "$type": "duration"
      },
      "base": {
        "$value": "200ms",
        "$type": "duration"
      },
      "slow": {
        "$value": "320ms",
        "$type": "duration"
      }
    },
    "easing": {
      "linear": {
        "$value": "linear",
        "$type": "cubicBezier"
      },
      "ease": {
        "$value": "ease",
        "$type": "cubicBezier"
      },
      "ease-out": {
        "$value": "cubic-bezier(0.16, 1, 0.3, 1)",
        "$type": "cubicBezier"
      },
      "ease-in-out": {
        "$value": "cubic-bezier(0.65, 0, 0.35, 1)",
        "$type": "cubicBezier"
      }
    },
    "z-index": {
      "base": {
        "$value": 0,
        "$type": "number"
      },
      "dropdown": {
        "$value": 200,
        "$type": "number"
      },
      "sticky": {
        "$value": 300,
        "$type": "number"
      },
      "overlay": {
        "$value": 400,
        "$type": "number"
      },
      "modal": {
        "$value": 500,
        "$type": "number"
      },
      "toast": {
        "$value": 600,
        "$type": "number"
      }
    },
    "breakpoint": {
      "small": {
        "$value": "0",
        "$type": "dimension",
        "$description": "Mobile / Small. Default styles target this range (0–767px)."
      },
      "medium": {
        "$value": "768px",
        "$type": "dimension",
        "$description": "Tablet / Medium. 768–1199px."
      },
      "large": {
        "$value": "1200px",
        "$type": "dimension",
        "$description": "Desktop / Large. 1200px+."
      }
    },
    "size": {
      "control": {
        "xs": {
          "$value": "28px",
          "$type": "dimension"
        },
        "sm": {
          "$value": "36px",
          "$type": "dimension"
        },
        "md": {
          "$value": "44px",
          "$type": "dimension",
          "$description": "Default button/input height"
        },
        "lg": {
          "$value": "52px",
          "$type": "dimension"
        },
        "xl": {
          "$value": "60px",
          "$type": "dimension"
        }
      },
      "container": {
        "max": {
          "$value": "1440px",
          "$type": "dimension",
          "$description": "Max content width"
        },
        "sm": {
          "$value": "768px",
          "$type": "dimension"
        },
        "md": {
          "$value": "1024px",
          "$type": "dimension"
        },
        "lg": {
          "$value": "1200px",
          "$type": "dimension"
        }
      },
      "header-height": {
        "small": {
          "$value": "56px",
          "$type": "dimension"
        },
        "medium": {
          "$value": "64px",
          "$type": "dimension"
        },
        "large": {
          "$value": "72px",
          "$type": "dimension"
        }
      }
    },
    "opacity": {
      "disabled": {
        "$value": 0.4,
        "$type": "number",
        "$description": "Deselected/disabled state (D22)"
      },
      "muted": {
        "$value": 0.7,
        "$type": "number"
      },
      "scrim-light": {
        "$value": 0.5,
        "$type": "number"
      },
      "scrim": {
        "$value": 0.85,
        "$type": "number"
      }
    }
  },
  "semantic": {
    "color": {
      "brand": {
        "default": {
          "$value": "{color.blue.700}",
          "$type": "color"
        },
        "hover": {
          "$value": "{color.blue.800}",
          "$type": "color"
        },
        "deep": {
          "$value": "{color.blue.900}",
          "$type": "color",
          "$description": "Announcement bar, footer (D7)"
        },
        "subtle": {
          "$value": "{color.blue.50}",
          "$type": "color",
          "$description": "Brand-tinted surface"
        }
      },
      "accent": {
        "default": {
          "$value": "{color.gold.500}",
          "$type": "color"
        },
        "hover": {
          "$value": "{color.gold.600}",
          "$type": "color"
        },
        "subtle": {
          "$value": "{color.gold.50}",
          "$type": "color"
        },
        "deep": {
          "$value": "{color.gold.700}",
          "$type": "color",
          "$description": "Accent text on light surfaces (WCAG AA, D9)"
        }
      },
      "text": {
        "default": {
          "$value": "{color.gray.900}",
          "$type": "color"
        },
        "secondary": {
          "$value": "{color.gray.800}",
          "$type": "color"
        },
        "subtle": {
          "$value": "{color.gray.600}",
          "$type": "color"
        },
        "muted": {
          "$value": "{color.gray.500}",
          "$type": "color"
        },
        "inverted": {
          "$value": "{color.gray.0}",
          "$type": "color"
        },
        "brand": {
          "$value": "{color.blue.700}",
          "$type": "color"
        },
        "accent": {
          "$value": "{color.gold.500}",
          "$type": "color"
        },
        "link": {
          "$value": "{color.blue.700}",
          "$type": "color"
        }
      },
      "surface": {
        "default": {
          "$value": "{color.gray.0}",
          "$type": "color",
          "$description": "Page background"
        },
        "subtle": {
          "$value": "{color.gray.50}",
          "$type": "color",
          "$description": "Cards on white pages, inputs (D6: consolidated to #f5f7fa)"
        },
        "muted": {
          "$value": "{color.gray.200}",
          "$type": "color",
          "$description": "Heavier neutral surface"
        },
        "search": {
          "$value": "{color.gray.150}",
          "$type": "color",
          "$description": "Search-bar field bg specifically"
        },
        "dark": {
          "$value": "{color.gray.950}",
          "$type": "color",
          "$description": "Machine-card image bg"
        },
        "inverted": {
          "$value": "{color.blue.900}",
          "$type": "color",
          "$description": "Announcement bar, footer"
        }
      },
      "border": {
        "default": {
          "$value": "{color.gray.300}",
          "$type": "color"
        },
        "subtle": {
          "$value": "{color.gray.200}",
          "$type": "color"
        },
        "strong": {
          "$value": "{color.gray.400}",
          "$type": "color",
          "$description": "Card hover, active state"
        },
        "brand": {
          "$value": "{color.blue.700}",
          "$type": "color",
          "$description": "Focused inputs, selected cards"
        },
        "focus": {
          "$value": "{color.alpha.brand.10}",
          "$type": "color",
          "$description": "Focus ring shadow"
        }
      },
      "icon": {
        "default": {
          "$value": "{color.gray.900}",
          "$type": "color"
        },
        "subtle": {
          "$value": "{color.gray.600}",
          "$type": "color"
        },
        "muted": {
          "$value": "{color.gray.300}",
          "$type": "color",
          "$description": "Image-placeholder strokes (D11: replaces former #ccc)"
        },
        "brand": {
          "$value": "{color.blue.700}",
          "$type": "color"
        },
        "accent": {
          "$value": "{color.gold.500}",
          "$type": "color"
        },
        "inverted": {
          "$value": "{color.gray.0}",
          "$type": "color"
        }
      },
      "feedback": {
        "success": {
          "default": {
            "$value": "{color.green.500}",
            "$type": "color"
          },
          "text": {
            "$value": "{color.green.800}",
            "$type": "color",
            "$description": "Canonical success text on light surface (#15692a, WCAG AA)"
          },
          "surface": {
            "$value": "{color.green.50}",
            "$type": "color"
          },
          "border": {
            "$value": "{color.green.300}",
            "$type": "color"
          }
        },
        "warning": {
          "default": {
            "$value": "{color.amber.500}",
            "$type": "color"
          },
          "text": {
            "$value": "{color.amber.700}",
            "$type": "color",
            "$description": "Canonical warning text (#92400e, WCAG AA)"
          },
          "surface": {
            "$value": "{color.amber.50}",
            "$type": "color"
          },
          "border": {
            "$value": "{color.amber.300}",
            "$type": "color"
          }
        },
        "error": {
          "default": {
            "$value": "{color.red.500}",
            "$type": "color"
          },
          "hover": {
            "$value": "{color.red.600}",
            "$type": "color"
          },
          "text": {
            "$value": "{color.red.800}",
            "$type": "color",
            "$description": "Canonical error text (#991b1b, WCAG AA)"
          },
          "surface": {
            "$value": "{color.red.50}",
            "$type": "color"
          },
          "border": {
            "$value": "{color.red.500}",
            "$type": "color"
          }
        },
        "info": {
          "default": {
            "$value": "{color.indigo.700}",
            "$type": "color"
          },
          "text": {
            "$value": "{color.indigo.700}",
            "$type": "color"
          },
          "surface": {
            "$value": "{color.indigo.50}",
            "$type": "color"
          },
          "border": {
            "$value": "{color.indigo.300}",
            "$type": "color"
          }
        },
        "stock": {
          "in": {
            "$value": "{color.green.800}",
            "$type": "color"
          },
          "in-bg": {
            "$value": "{color.green.50}",
            "$type": "color"
          },
          "low": {
            "$value": "{color.amber.700}",
            "$type": "color"
          },
          "low-bg": {
            "$value": "{color.amber.50}",
            "$type": "color"
          },
          "out": {
            "$value": "{color.red.800}",
            "$type": "color"
          },
          "out-bg": {
            "$value": "{color.red.50}",
            "$type": "color"
          },
          "back": {
            "$value": "{color.gray.700}",
            "$type": "color"
          },
          "back-bg": {
            "$value": "{color.gray.50}",
            "$type": "color"
          }
        }
      },
      "overlay": {
        "scrim": {
          "$value": "{color.alpha.black.50}",
          "$type": "color",
          "$description": "Modal/menu scrim"
        },
        "image-tint": {
          "$value": "{color.alpha.white.85}",
          "$type": "color",
          "$description": "Wishlist button bg over images"
        },
        "image-overlay": {
          "$value": "{color.alpha.black.50}",
          "$type": "color",
          "$description": "Machine card icon bg"
        },
        "brand-wash": {
          "$value": "{color.alpha.brand.06}",
          "$type": "color",
          "$description": "Brand hover wash"
        }
      }
    },
    "radius": {
      "control": {
        "$value": "{radius.sm}",
        "$type": "dimension",
        "$description": "Buttons, inputs, badges"
      },
      "card": {
        "$value": "{radius.md}",
        "$type": "dimension",
        "$description": "Cards, alerts"
      },
      "panel": {
        "$value": "{radius.lg}",
        "$type": "dimension",
        "$description": "Larger surfaces, modals"
      },
      "pill": {
        "$value": "{radius.full}",
        "$type": "dimension"
      },
      "tag": {
        "$value": "{radius.xs}",
        "$type": "dimension",
        "$description": "Stock pills, OEM badges"
      }
    },
    "elevation": {
      "rest": {
        "$value": "{shadow.xs}",
        "$type": "shadow",
        "$description": "Cards at rest"
      },
      "raised": {
        "$value": "{shadow.sm}",
        "$type": "shadow",
        "$description": "Cards on hover"
      },
      "floating": {
        "$value": "{shadow.md}",
        "$type": "shadow",
        "$description": "Dropdowns, popovers"
      },
      "overlay": {
        "$value": "{shadow.lg}",
        "$type": "shadow",
        "$description": "Modals"
      },
      "deep": {
        "$value": "{shadow.xl}",
        "$type": "shadow"
      }
    },
    "typography": {
      "display": {
        "lg": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "56px — hero/landing"
          },
          "fontSize": {
            "$value": "{font-size.5xl}",
            "$type": "dimension",
            "$description": "56px — hero/landing"
          },
          "fontWeight": {
            "$value": "{font-weight.extrabold}",
            "$type": "fontWeight",
            "$description": "56px — hero/landing"
          },
          "lineHeight": {
            "$value": "{line-height.tight}",
            "$type": "number",
            "$description": "56px — hero/landing"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.tighter}",
            "$type": "dimension",
            "$description": "56px — hero/landing"
          }
        },
        "md": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "48px — section hero"
          },
          "fontSize": {
            "$value": "{font-size.4xl}",
            "$type": "dimension",
            "$description": "48px — section hero"
          },
          "fontWeight": {
            "$value": "{font-weight.bold}",
            "$type": "fontWeight",
            "$description": "48px — section hero"
          },
          "lineHeight": {
            "$value": "{line-height.tight}",
            "$type": "number",
            "$description": "48px — section hero"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.tight}",
            "$type": "dimension",
            "$description": "48px — section hero"
          }
        },
        "sm": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "40px — compact hero, card hero"
          },
          "fontSize": {
            "$value": "{font-size.3xl}",
            "$type": "dimension",
            "$description": "40px — compact hero, card hero"
          },
          "fontWeight": {
            "$value": "{font-weight.bold}",
            "$type": "fontWeight",
            "$description": "40px — compact hero, card hero"
          },
          "lineHeight": {
            "$value": "{line-height.tight}",
            "$type": "number",
            "$description": "40px — compact hero, card hero"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.tight}",
            "$type": "dimension",
            "$description": "40px — compact hero, card hero"
          }
        }
      },
      "heading": {
        "h1": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily"
          },
          "fontSize": {
            "$value": "{font-size.3xl}",
            "$type": "dimension"
          },
          "fontWeight": {
            "$value": "{font-weight.bold}",
            "$type": "fontWeight"
          },
          "lineHeight": {
            "$value": "{line-height.tight}",
            "$type": "number"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension"
          }
        },
        "h2": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily"
          },
          "fontSize": {
            "$value": "{font-size.2xl}",
            "$type": "dimension"
          },
          "fontWeight": {
            "$value": "{font-weight.bold}",
            "$type": "fontWeight"
          },
          "lineHeight": {
            "$value": "{line-height.tight}",
            "$type": "number"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension"
          }
        },
        "h3": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily"
          },
          "fontSize": {
            "$value": "{font-size.xl}",
            "$type": "dimension"
          },
          "fontWeight": {
            "$value": "{font-weight.bold}",
            "$type": "fontWeight"
          },
          "lineHeight": {
            "$value": "{line-height.snug}",
            "$type": "number"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension"
          }
        },
        "h4": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily"
          },
          "fontSize": {
            "$value": "{font-size.lg}",
            "$type": "dimension"
          },
          "fontWeight": {
            "$value": "{font-weight.bold}",
            "$type": "fontWeight"
          },
          "lineHeight": {
            "$value": "{line-height.snug}",
            "$type": "number"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension"
          }
        },
        "h5": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily"
          },
          "fontSize": {
            "$value": "{font-size.md}",
            "$type": "dimension"
          },
          "fontWeight": {
            "$value": "{font-weight.bold}",
            "$type": "fontWeight"
          },
          "lineHeight": {
            "$value": "{line-height.snug}",
            "$type": "number"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension"
          }
        },
        "h6": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily"
          },
          "fontSize": {
            "$value": "{font-size.sm}",
            "$type": "dimension"
          },
          "fontWeight": {
            "$value": "{font-weight.bold}",
            "$type": "fontWeight"
          },
          "lineHeight": {
            "$value": "{line-height.snug}",
            "$type": "number"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension"
          }
        }
      },
      "body": {
        "lg": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "18px — emphasized prose"
          },
          "fontSize": {
            "$value": "{font-size.md}",
            "$type": "dimension",
            "$description": "18px — emphasized prose"
          },
          "fontWeight": {
            "$value": "{font-weight.regular}",
            "$type": "fontWeight",
            "$description": "18px — emphasized prose"
          },
          "lineHeight": {
            "$value": "{line-height.relaxed}",
            "$type": "number",
            "$description": "18px — emphasized prose"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension",
            "$description": "18px — emphasized prose"
          }
        },
        "md": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "16px — body default"
          },
          "fontSize": {
            "$value": "{font-size.sm}",
            "$type": "dimension",
            "$description": "16px — body default"
          },
          "fontWeight": {
            "$value": "{font-weight.regular}",
            "$type": "fontWeight",
            "$description": "16px — body default"
          },
          "lineHeight": {
            "$value": "{line-height.relaxed}",
            "$type": "number",
            "$description": "16px — body default"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension",
            "$description": "16px — body default"
          }
        },
        "sm": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "14px — secondary copy"
          },
          "fontSize": {
            "$value": "{font-size.xs}",
            "$type": "dimension",
            "$description": "14px — secondary copy"
          },
          "fontWeight": {
            "$value": "{font-weight.regular}",
            "$type": "fontWeight",
            "$description": "14px — secondary copy"
          },
          "lineHeight": {
            "$value": "{line-height.normal}",
            "$type": "number",
            "$description": "14px — secondary copy"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension",
            "$description": "14px — secondary copy"
          }
        },
        "xs": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "12px — fine print"
          },
          "fontSize": {
            "$value": "{font-size.2xs}",
            "$type": "dimension",
            "$description": "12px — fine print"
          },
          "fontWeight": {
            "$value": "{font-weight.regular}",
            "$type": "fontWeight",
            "$description": "12px — fine print"
          },
          "lineHeight": {
            "$value": "{line-height.normal}",
            "$type": "number",
            "$description": "12px — fine print"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension",
            "$description": "12px — fine print"
          }
        }
      },
      "label": {
        "md": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "14px label"
          },
          "fontSize": {
            "$value": "{font-size.xs}",
            "$type": "dimension",
            "$description": "14px label"
          },
          "fontWeight": {
            "$value": "{font-weight.semibold}",
            "$type": "fontWeight",
            "$description": "14px label"
          },
          "lineHeight": {
            "$value": "{line-height.normal}",
            "$type": "number",
            "$description": "14px label"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.widest}",
            "$type": "dimension",
            "$description": "14px label"
          }
        },
        "sm": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "12px label"
          },
          "fontSize": {
            "$value": "{font-size.2xs}",
            "$type": "dimension",
            "$description": "12px label"
          },
          "fontWeight": {
            "$value": "{font-weight.semibold}",
            "$type": "fontWeight",
            "$description": "12px label"
          },
          "lineHeight": {
            "$value": "{line-height.normal}",
            "$type": "number",
            "$description": "12px label"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.widest}",
            "$type": "dimension",
            "$description": "12px label"
          }
        },
        "xs": {
          "fontFamily": {
            "$value": "{font-family.sans}",
            "$type": "fontFamily",
            "$description": "10px label — stock badges, OEM badges"
          },
          "fontSize": {
            "$value": "{font-size.3xs}",
            "$type": "dimension",
            "$description": "10px label — stock badges, OEM badges"
          },
          "fontWeight": {
            "$value": "{font-weight.bold}",
            "$type": "fontWeight",
            "$description": "10px label — stock badges, OEM badges"
          },
          "lineHeight": {
            "$value": "{line-height.normal}",
            "$type": "number",
            "$description": "10px label — stock badges, OEM badges"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.wider}",
            "$type": "dimension",
            "$description": "10px label — stock badges, OEM badges"
          }
        }
      },
      "code": {
        "md": {
          "fontFamily": {
            "$value": "{font-family.mono}",
            "$type": "fontFamily"
          },
          "fontSize": {
            "$value": "{font-size.xs}",
            "$type": "dimension"
          },
          "fontWeight": {
            "$value": "{font-weight.regular}",
            "$type": "fontWeight"
          },
          "lineHeight": {
            "$value": "{line-height.normal}",
            "$type": "number"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension"
          }
        },
        "sm": {
          "fontFamily": {
            "$value": "{font-family.mono}",
            "$type": "fontFamily"
          },
          "fontSize": {
            "$value": "{font-size.2xs}",
            "$type": "dimension"
          },
          "fontWeight": {
            "$value": "{font-weight.regular}",
            "$type": "fontWeight"
          },
          "lineHeight": {
            "$value": "{line-height.normal}",
            "$type": "number"
          },
          "letterSpacing": {
            "$value": "{letter-spacing.normal}",
            "$type": "dimension"
          }
        }
      }
    },
    "motion": {
      "fast": {
        "$value": "{duration.fast} {easing.ease}",
        "$type": "transition",
        "$description": "Hover, focus"
      },
      "base": {
        "$value": "{duration.base} {easing.ease}",
        "$type": "transition",
        "$description": "Card hover, dropdown"
      },
      "slow": {
        "$value": "{duration.slow} {easing.ease}",
        "$type": "transition",
        "$description": "Modal, drawer"
      }
    },
    "layout": {
      "container-pad": {
        "small": {
          "$value": "{spacing.4}",
          "$type": "dimension",
          "$description": "16px on mobile"
        },
        "medium": {
          "$value": "{spacing.8}",
          "$type": "dimension",
          "$description": "32px on tablet"
        },
        "large": {
          "$value": "{spacing.20}",
          "$type": "dimension",
          "$description": "80px on desktop"
        }
      },
      "section-gap": {
        "small": {
          "$value": "{spacing.8}",
          "$type": "dimension"
        },
        "medium": {
          "$value": "{spacing.12}",
          "$type": "dimension"
        },
        "large": {
          "$value": "{spacing.16}",
          "$type": "dimension"
        }
      },
      "header-height": {
        "small": {
          "$value": "{size.header-height.small}",
          "$type": "dimension"
        },
        "medium": {
          "$value": "{size.header-height.medium}",
          "$type": "dimension"
        },
        "large": {
          "$value": "{size.header-height.large}",
          "$type": "dimension"
        }
      }
    }
  },
  "components": {
    "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": {
        "bg": {
          "$value": "{color.accent.default}",
          "$type": "color"
        },
        "bg-hover": {
          "$value": "{color.accent.hover}",
          "$type": "color"
        },
        "fg": {
          "$value": "{color.text.default}",
          "$type": "color"
        }
      },
      "brand": {
        "bg": {
          "$value": "{color.brand.default}",
          "$type": "color"
        },
        "bg-hover": {
          "$value": "{color.brand.hover}",
          "$type": "color"
        },
        "fg": {
          "$value": "{color.text.inverted}",
          "$type": "color"
        }
      },
      "outline": {
        "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": {
        "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": {
        "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": {
        "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": {
      "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": {
      "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": {
      "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": {
      "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"
      }
    }
  }
}