// ❌ WRONG - Hardcoded hex colors
className="bg-[#343E55] text-[#FFFFFF]"

// ❌ WRONG - Hardcoded RGB/HSL
className="bg-[rgb(52,62,85)] text-[hsl(0,0%,100%)]"

// ❌ WRONG - Hardcoded named colors
className="bg-white text-black"

// ❌ WRONG - Hardcoded Tailwind colors
className="bg-gray-50 text-gray-900"

// ✅ CORRECT - Semantic CSS variables
className="bg-primary text-primary-foreground"
className="bg-semantic-bg-primary text-semantic-text-primary"
className="border-semantic-border-layout"

# Verify a semantic token exists
grep "--semantic-success-primary" src/index.css

# If not found, search for alternatives
grep "success" src/index.css

// ✅ CORRECT - Mobile-first responsive padding
className="px-4 py-2 sm:px-6 sm:py-3 lg:px-8 lg:py-4"

// ✅ CORRECT - Responsive text sizes
className="text-sm md:text-base lg:text-lg"

// ✅ CORRECT - Responsive layout
className="flex flex-col sm:flex-row gap-2 sm:gap-4"

// ✅ CORRECT - Responsive visibility
className="hidden md:block"

// ✅ CORRECT - Semantic font sizes
className="text-sm"      // 14px - Small text, captions
className="text-base"    // 16px - Default body text
className="text-lg"      // 18px - Large body text
className="text-xl"      // 20px - Headings
className="text-2xl"     // 24px - Section headers

// ✅ CORRECT - Font weights
className="font-normal"     // 400 - Body text
className="font-medium"     // 500 - Emphasized text
className="font-semibold"   // 600 - Headings
className="font-bold"       // 700 - Strong emphasis

// ✅ CORRECT - Line heights
className="leading-none"     // 1 - Tight spacing
className="leading-tight"    // 1.25 - Headings
className="leading-normal"   // 1.5 - Body text
className="leading-relaxed"  // 1.625 - Comfortable reading

// ✅ CORRECT - Letter spacing
className="tracking-tight"   // -0.025em
className="tracking-normal"  // 0em
className="tracking-wide"    // 0.025em

## Typography

| Element | Font Size | Line Height | Weight | Letter Spacing |
|---------|-----------|-------------|--------|----------------|
| Title | 16px (`text-base`) | 24px (`leading-6`) | 600 (`font-semibold`) | 0px (`tracking-[0px]`) |
| Description | 14px (`text-sm`) | 20px (`leading-relaxed`) | 400 (`font-normal`) | 0.035px (`tracking-[0.035px]`) |

// ✅ CORRECT - Sufficient contrast
className="bg-primary text-primary-foreground"  // Ensures contrast
className="bg-background text-foreground"       // Theme-aware contrast

// ❌ WRONG - Potentially low contrast
className="bg-gray-100 text-gray-300"  // May fail contrast check

// ✅ CORRECT - Visible focus indicator
className="focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"

// ✅ CORRECT - Focus-visible for keyboard only
className="focus-visible:ring-2 focus-visible:ring-ring"

// ✅ CORRECT - Keyboard accessible
<button onClick={...}>  // Inherently keyboard accessible

// ✅ CORRECT - Custom interactive element with keyboard support
<div role="button" tabIndex={0} onKeyDown={handleKeyPress} onClick={...}>

// ❌ WRONG - Not keyboard accessible
<div onClick={...}>  // Missing role and tabIndex

// ✅ CORRECT - Proper ARIA labels
<button aria-label="Close dialog">
<input aria-invalid={hasError} aria-describedby="error-message">
<div role="alert" aria-live="polite">

// ✅ CORRECT - Form field associations
<label htmlFor="email">Email</label>
<input id="email" name="email">

# Check for hardcoded hex colors
grep -r "#[0-9A-Fa-f]\{3,6\}" src/components/ui/component.tsx

# Check for RGB/HSL values
grep -r "rgb\|hsl" src/components/ui/component.tsx

# Check for hardcoded Tailwind colors
grep -r "bg-\(gray\|red\|blue\|green\|yellow\)-[0-9]" src/components/ui/component.tsx

Found: bg-[#343E55]
Context: Primary button background
Suggested mapping: bg-primary

Found: text-[#FFFFFF]
Context: Text on primary button
Suggested mapping: text-primary-foreground

Found: border-[#E4E4E4]
Context: Container border
Suggested mapping: border-semantic-border-layout

// Check padding is responsive
✓ Found: px-4 sm:px-6 lg:px-8
✓ Found: py-2 sm:py-3

// Check text sizing is responsive
✓ Found: text-sm md:text-base

// Check layout is responsive
✓ Found: flex-col sm:flex-row

// Check focus states
✓ Found: focus:ring-2 focus:ring-ring

// Check ARIA labels
✓ Found: aria-label="Close"

// Check keyboard support
✓ Found: onKeyDown handler for custom interactive element

# Design System Validation Report

## CSS Variables
✅ All colors use semantic tokens
- bg-primary, text-primary-foreground
- border-semantic-border-layout
- text-semantic-text-muted

## Responsive Design
✅ Mobile-first breakpoints used
- Padding: px-4 sm:px-6 lg:px-8
- Text: text-sm md:text-base
- Layout: flex-col sm:flex-row

## Typography
✅ Semantic typography tokens
- Font sizes: text-sm, text-base
- Weights: font-normal, font-semibold
- Line heights: leading-normal, leading-relaxed

## Accessibility
✅ WCAG 2.1 AA compliant
- Focus states: focus:ring-2
- ARIA labels: aria-label present
- Keyboard: onKeyDown handlers

## Issues Found
❌ Hardcoded color at line 45: bg-[#F3F4F6]
   Suggested fix: bg-muted

## Recommendations
- Replace bg-[#F3F4F6] with bg-muted
- Add responsive padding to container
- Consider adding aria-describedby for error states

const buttonVariants = cva(
  "inline-flex items-center justify-center",
  {
    variants: {
      variant: {
        default: "bg-secondary text-secondary-foreground",       // #F3F4F6 → bg-secondary
        primary: "bg-primary text-primary-foreground",           // #343E55 → bg-primary
        destructive: "bg-destructive text-destructive-foreground", // #EF4444 → bg-destructive
      },
    },
  }
)

const alertVariants = cva(
  "rounded-lg border p-4",
  {
    variants: {
      variant: {
        destructive: "bg-semantic-error-subtle text-semantic-error-primary border-destructive",
        success: "bg-semantic-success-subtle text-semantic-success-primary border-success",
        warning: "bg-semantic-warning-subtle text-semantic-warning-primary border-warning",
      },
    },
  }
)

const inputVariants = cva(
  "flex h-10 w-full rounded-md px-3 py-2",
  "bg-background text-foreground",                    // Background & text
  "border border-input",                              // Normal border
  "placeholder:text-muted-foreground",                // Placeholder
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", // Focus
  "disabled:cursor-not-allowed disabled:opacity-50",
  {
    variants: {
      state: {
        default: "border-input",
        error: "border-semantic-error-primary",        // Error border
        success: "border-semantic-success-primary",
      },
    },
  }
)

❌ Hardcoded color detected at line 45

Found:
  className="bg-[#343E55] text-white"

Issue:
  - bg-[#343E55]: Hardcoded hex color
  - text-white: Hardcoded color name

Fix:
  className="bg-primary text-primary-foreground"

Reasoning:
  - #343E55 is the primary brand color → use bg-primary
  - white on primary needs high contrast → use text-primary-foreground
  - Enables automatic theme switching (dark mode)