// /styles/tokens/colors.ts
export const colors = {
  light: {
    primary: '#Extracted from Figma',
    secondary: '#Extracted from Figma',
    background: '#Extracted from Figma',
    foreground: '#Extracted from Figma',
    // ... Other colors
  },
  dark: {
    primary: '#Automatically derived',
    secondary: '#Automatically derived',
    background: '#Automatically derived',
    foreground: '#Automatically derived',
    // ... Automatically generated
  }
}

// /styles/tokens/typography.ts
export const typography = {
  fontFamily: {
    sans: 'Extracted from Figma',
    serif: 'Extracted from Figma',
    mono: 'Extracted from Figma',
  },
  fontSize: {
    xs: 'Extracted from Figma',
    sm: 'Extracted from Figma',
    base: 'Extracted from Figma',
    lg: 'Extracted from Figma',
    xl: 'Extracted from Figma',
    '2xl': 'Extracted from Figma',
    // ... Other sizes
  },
  fontWeight: {
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
  lineHeight: {
    tight: 'Extracted from Figma',
    normal: 'Extracted from Figma',
    relaxed: 'Extracted from Figma',
  },
  letterSpacing: {
    tight: 'Extracted from Figma',
    normal: 'Extracted from Figma',
    wide: 'Extracted from Figma',
  },
}

// /styles/tokens/spacing.ts
export const spacing = {
  0: '0',
  1: 'Extracted from Figma', // e.g. 4px
  2: 'Extracted from Figma', // e.g. 8px
  3: 'Extracted from Figma', // e.g. 12px
  4: 'Extracted from Figma', // e.g. 16px
  // ... Other spacing values
}

// /styles/tokens/shadows.ts
export const shadows = {
  sm: 'Extracted from Figma',
  md: 'Extracted from Figma',
  lg: 'Extracted from Figma',
  xl: 'Extracted from Figma',
}

/* ❌ Wrong: Will override all Tailwind p-*, m-*, gap-* classes */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ✅ Correct: Only set box-sizing, let Tailwind utility classes work normally */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@import "tailwindcss";

:root {
  --background: #F5F5F5;
  --foreground: #1D2129;
  --surface: #FFFFFF;
  --border: #E5E6EB;
  
  --text-primary: #1D2129;
  --text-secondary: #4E5969;
  --text-tertiary: #86909C;
  
  --primary: #6242FD;
  --primary-hover: #5230E0;
}

.dark {
  --background: #0F172A;
  --foreground: #F9FAFB;
  /* ... dark mode variables */
}

/* ✅ Only set box-sizing, don't reset margin/padding */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  min-height: 100vh;
}

// ❌ Wrong: Fixed width may exceed Grid column width
<div className="w-[218px] rounded-xl">

// Grid container
<div className="grid grid-cols-4 gap-4">
  {/* Actual column width may only be 200px */}
</div>

// ✅ Correct: Use w-full to make component adapt to Grid column width
<div className="w-full rounded-xl">

// Grid container
<div className="grid grid-cols-4 gap-4">
  {/* Component will automatically fill the column width */}
</div>

/components
  /atoms          # Atomic components (Button, Input, Icon...)
  /molecules      # Molecule components (SearchBar, Card...)
  /organisms      # Organism components (Header, Footer...)
  /templates      # Template components
  /pages          # Page components

/components
  /atoms
    /Button
      Button.tsx        # Component implementation
      Button.types.ts   # Type definitions
      index.ts          # Export

| Figma Component Name | Code Component Name | File Path |
|-------------|-----------|---------|
| Button/Primary | Button | /components/atoms/Button |
| Button/Secondary | Button | /components/atoms/Button |
| Input/Text | Input | /components/atoms/Input |

interface IconProps {
  size?: number
  color?: string
  strokeWidth?: number
  className?: string
}

import { motion, AnimatePresence } from 'motion/react'

<AnimatePresence>
  {isVisible && (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
      style={{ willChange: 'transform, opacity' }}
    />
  )}
</AnimatePresence>

// /components/ThemeProvider.tsx
'use client'
import { createContext, useContext, useEffect, useState } from 'react'

type Theme = 'light' | 'dark'
type ThemeContextType = {
  theme: Theme
  setTheme: (theme: Theme) => void
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light')
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    const savedTheme = localStorage.getItem('theme') as Theme | null
    setTheme(savedTheme || (prefersDark ? 'dark' : 'light'))
  }, [])

  useEffect(() => {
    if (mounted) {
      document.documentElement.classList.toggle('dark', theme === 'dark')
      localStorage.setItem('theme', theme)
    }
  }, [theme, mounted])

  if (!mounted) return null

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

export const useTheme = () => {
  const context = useContext(ThemeContext)
  if (!context) throw new Error('useTheme must be used within ThemeProvider')
  return context
}

Figma File (MCP)
      ↓
  Extract Design Tokens
  (Colors, Typography, Spacing, Components)
      ↓
  Generate Design System Files
  (tokens/*.ts)
      ↓
  Create Component Mapping File
  (component-mapping.md)
      ↓
  Create Base Components
  (Based on Figma Components)
      ↓
  Apply Best Practices
  (vercel-react-best-practices)
      ↓
  Accessibility & UX Review
  (web-design-guidelines)
      ↓
  Complete Page Implementation