// Figma "Button": Size (sm, md, lg), Variant (primary, secondary, ghost), State (default, disabled)
interface ButtonProps {
  size?: 'sm' | 'md' | 'lg';
  variant?: 'primary' | 'secondary' | 'ghost';
  disabled?: boolean;
  children: React.ReactNode;
  onClick?: () => void;
}

export function Button({ size = 'md', variant = 'primary', disabled = false, children, onClick }: ButtonProps) {
  return (
    <button className={cn(styles.button, styles[size], styles[variant])} disabled={disabled} onClick={onClick}>
      {children}
    </button>
  );
}

/* Figma local variable collection: "Colors" */
/* Group: brand/primary */
:root {
  --color-brand-primary-50: #eef2ff;
  --color-brand-primary-500: #6366f1;
  --color-brand-primary-600: #4f46e5;

  /* Figma semantic aliases */
  --color-action-bg: var(--color-brand-primary-600);
  --color-action-bg-hover: var(--color-brand-primary-700);
  --color-action-text: #ffffff;
}

/* Figma text style "Body/Regular" */
/* font-family: Inter, font-size: 16, font-weight: 400, line-height: 24 */
:root {
  --font-body-family: 'Inter', sans-serif;
  --font-body-size: 1rem;      /* 16px */
  --font-body-weight: 400;
  --font-body-line-height: 1.5; /* 24/16 */
}

/* Figma: Horizontal, Gap 16, Padding 12px 24px, Align center, Fill container */
.card-actions { display: flex; flex-direction: row; gap: 16px; padding: 12px 24px; align-items: center; width: 100%; }

/* Figma: Vertical, Gap 8, Padding 24, Hug contents */
.form-field { display: flex; flex-direction: column; gap: 8px; padding: 24px; width: fit-content; }

/* Figma layout grid: 3 columns, col-gap 24, row-gap 32 */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 32px; }

:root {
  /* Figma "Typography" text styles - converted to CSS custom properties */
  --type-h1:    2.25rem;   /* 36px, w700, lh 1.2  */
  --type-h2:    1.875rem;  /* 30px, w600, lh 1.25 */
  --type-h3:    1.5rem;    /* 24px, w600, lh 1.3  */
  --type-body:  1rem;      /* 16px, w400, lh 1.5  */
  --type-sm:    0.875rem;  /* 14px, w400, lh 1.5  */
  --type-label: 0.875rem;  /* 14px, w500, lh 1.4  */
  --type-xs:    0.75rem;   /* 12px, w400, lh 1.6  */
}

// Figma component "ProductCard"
// Layers: thumbnail (image frame), badge? (absolute overlay),
//   content (vertical auto layout): title, meta, actions (horizontal auto layout)

interface ProductCardProps {
  thumbnail: string;
  title: string;
  meta: string;
  badge?: string;           // optional layer in Figma
  onAddToCart: () => void;
  onViewDetails: () => void;
}

export function ProductCard({ thumbnail, title, meta, badge, onAddToCart, onViewDetails }: ProductCardProps) {
  return (
    <div className="product-card">                       {/* vertical flex */}
      <div className="product-card__thumbnail">          {/* position: relative, aspect-ratio: 16/9 */}
        <img src={thumbnail} alt={title} />
        {badge && <span className="product-card__badge">{badge}</span>} {/* absolute */}
      </div>
      <div className="product-card__content">            {/* vertical flex, gap 8, padding 16 */}
        <h3 className="product-card__title">{title}</h3>
        <p className="product-card__meta">{meta}</p>
        <div className="product-card__actions">          {/* horizontal flex, gap 8 */}
          <Button variant="primary" onClick={onAddToCart}>Add to cart</Button>
          <Button variant="ghost" onClick={onViewDetails}>Details</Button>
        </div>
      </div>
    </div>
  );
}

:root {
  /* Figma "Spacing" variable collection */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --space-16: 64px;
}

/* Left+Right constraint -> stretches full width */
.hero-section { width: 100%; padding: 80px 24px; }

/* Centered inner content with designer's max-width */
.hero-content { max-width: 1200px; margin: 0 auto; }

/* Desktop 2-col layout -> collapse on mobile (from Figma mobile frame) */
.hero-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 768px) {
  .hero-columns { grid-template-columns: 1fr; gap: 32px; }
}

:root {
  /* Primitive tokens - Figma "Color/Primitives" */
  --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8;
  --gray-50: #f9fafb;  --gray-100: #f3f4f6; --gray-700: #374151; --gray-900: #111827;

  /* Semantic tokens - Figma "Color/Semantic" - reference primitives */
  --color-bg-default: var(--gray-50);
  --color-bg-surface: #ffffff;
  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-action-primary: var(--blue-600);
  --color-action-primary-hover: var(--blue-700);
  --color-border-default: var(--gray-100);
}

/* Dark theme - from Figma dark mode frame */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-default: #0f172a;
    --color-bg-surface: #1e293b;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-border-default: #334155;
  }
}

undefined

```tsx
// Result: typed, tree-shakeable icon component
// Always match Figma's icon sizes: 16, 20, 24, 32px
interface IconProps { size?: 16 | 20 | 24 | 32; className?: string; }

export function ArrowRightIcon({ size = 20, className }: IconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" className={className}>
      <path d="M4 10h12M10 4l6 6-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}