Feature: Add Support for Component Variations

Summary

Introduce structured support for component variations (variants) in DESIGN.md to allow more expressive, scalable, and semantically rich component definitions beyond flat key-based naming.

Motivation

Currently, component variants (e.g. hover, active, size variations) are represented as separate component entries using naming conventions:

components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
  button-primary-hover:
    backgroundColor: "{colors.tertiary-container}"

Proposal

Add a variants field under components to explicitly model variations:

components:
  button:
    base:
      backgroundColor: "{colors.tertiary}"
      textColor: "{colors.on-tertiary}"
      rounded: "{rounded.sm}"
      padding: 12px

    variants:
      intent:
        primary:
          backgroundColor: "{colors.tertiary}"
        secondary:
          backgroundColor: "{colors.secondary}"

      size:
        sm:
          padding: 8px
        md:
          padding: 12px
        lg:
          padding: 16px

      state:
        hover:
          backgroundColor: "{colors.tertiary-container}"
        active:
          backgroundColor: "{colors.primary}"
        disabled:
          backgroundColor: "{colors.neutral}"

Start with DESIGN.md and compare the current flat component entries with the proposed base and variants structure. Define how intent, size, and state variations should be represented, including compatibility with existing naming conventions; the work is done when the format specification clearly documents the structured variants model.