# Figma Color System Configuration

This document provides a comprehensive structure for implementing the Figma design colors in the Inogen project. Please replace the placeholder values with the actual colors from the Figma design.

## Instructions
1. Open the Figma design file
2. Extract the exact hex values for each color category
3. Replace the placeholder values below
4. Update the corresponding files in the project

## Primary Brand Colors
Based on the current teal usage, these appear to be the main brand colors:

```css
/* Primary Brand Color (Teal) */
--primary-50: #f0fdfa     /* Replace with Figma value */
--primary-100: #ccfbf1    /* Replace with Figma value */
--primary-200: #99f6e4    /* Replace with Figma value */
--primary-300: #5eead4    /* Replace with Figma value */
--primary-400: #2dd4bf    /* Replace with Figma value */
--primary-500: #48D1CC    /* Current value - verify with Figma */
--primary-600: #40C4C4    /* Current value - verify with Figma */
--primary-700: #0f766e    /* Replace with Figma value */
--primary-800: #115e59    /* Replace with Figma value */
--primary-900: #134e4a    /* Replace with Figma value */
```

## Dark Theme Colors
Based on the current login page dark background:

```css
/* Dark Background Colors */
--dark-50: #f8fafc       /* Replace with Figma value */
--dark-100: #f1f5f9      /* Replace with Figma value */
--dark-200: #e2e8f0      /* Replace with Figma value */
--dark-300: #cbd5e1      /* Replace with Figma value */
--dark-400: #94a3b8      /* Replace with Figma value */
--dark-500: #64748b      /* Replace with Figma value */
--dark-600: #475569      /* Replace with Figma value */
--dark-700: #334155      /* Replace with Figma value */
--dark-800: #1A202C      /* Current value - verify with Figma */
--dark-900: #0f172a      /* Replace with Figma value */
```

## Neutral/Gray Colors
For text, borders, and subtle backgrounds:

```css
/* Neutral Colors */
--neutral-50: #FFFFFF     /* Replace with Figma value */
--neutral-100: #F7F8F9    /* Replace with Figma value */
--neutral-200: #E5E7EB    /* Replace with Figma value */
--neutral-300: #D1D5DB    /* Replace with Figma value */
--neutral-400: #9CA3AF    /* Replace with Figma value */
--neutral-500: #6B7280    /* Replace with Figma value */
--neutral-600: #4B5563    /* Replace with Figma value */
--neutral-700: #374151    /* Replace with Figma value */
--neutral-800: #1F2937    /* Replace with Figma value */
--neutral-900: #111827    /* Replace with Figma value */
```

## Status Colors

### Success Colors
```css
--success-50: #F0FDF4     /* Replace with Figma value */
--success-100: #DCFCE7    /* Replace with Figma value */
--success-500: #22C55E    /* Replace with Figma value */
--success-600: #16A34A    /* Replace with Figma value */
--success-700: #15803D    /* Replace with Figma value */
```

### Error Colors
```css
--error-50: #FEF2F2       /* Replace with Figma value */
--error-100: #FEE2E2      /* Replace with Figma value */
--error-500: #EF4444      /* Replace with Figma value */
--error-600: #DC2626      /* Replace with Figma value */
--error-700: #B91C1C      /* Replace with Figma value */
```

### Warning Colors
```css
--warning-50: #FFFBEB     /* Replace with Figma value */
--warning-100: #FEF3C7    /* Replace with Figma value */
--warning-500: #F59E0B    /* Replace with Figma value */
--warning-600: #D97706    /* Replace with Figma value */
--warning-700: #B45309    /* Replace with Figma value */
```

### Info Colors
```css
--info-50: #EFF6FF        /* Replace with Figma value */
--info-100: #DBEAFE      /* Replace with Figma value */
--info-500: #3B82F6      /* Replace with Figma value */
--info-600: #2563EB      /* Replace with Figma value */
--info-700: #1D4ED8      /* Replace with Figma value */
```

## Semantic Color Mapping

### Light Theme
```css
/* Backgrounds */
--background: var(--neutral-50)
--surface: var(--neutral-50)
--card: var(--neutral-50)

/* Text */
--text-primary: var(--neutral-900)
--text-secondary: var(--neutral-600)
--text-muted: var(--neutral-500)

/* Borders */
--border: var(--neutral-200)
--border-strong: var(--neutral-300)

/* Interactive */
--primary: var(--primary-500)
--primary-hover: var(--primary-600)
--primary-active: var(--primary-700)
```

### Dark Theme
```css
/* Backgrounds */
--background: var(--dark-900)
--surface: var(--dark-800)
--card: var(--dark-800)

/* Text */
--text-primary: var(--neutral-50)
--text-secondary: var(--neutral-300)
--text-muted: var(--neutral-400)

/* Borders */
--border: var(--dark-700)
--border-strong: var(--dark-600)

/* Interactive */
--primary: var(--primary-500)
--primary-hover: var(--primary-400)
--primary-active: var(--primary-300)
```

## Component-Specific Colors

### Login Page
```css
/* Login Background */
--login-bg: var(--dark-800)          /* Current: #1A202C */
--login-sidebar: var(--primary-500)  /* Current: #48D1CC */
--login-text: var(--neutral-50)
--login-text-muted: var(--neutral-300)
```

### Buttons
```css
/* Primary Button */
--btn-primary-bg: var(--primary-500)
--btn-primary-text: var(--dark-800)
--btn-primary-hover: var(--primary-600)

/* Secondary Button */
--btn-secondary-bg: var(--neutral-100)
--btn-secondary-text: var(--neutral-900)
--btn-secondary-hover: var(--neutral-200)
```

### Forms
```css
/* Input Fields */
--input-bg: var(--neutral-50)
--input-border: var(--neutral-300)
--input-border-focus: var(--primary-500)
--input-text: var(--neutral-900)
--input-placeholder: var(--neutral-500)
```

## Files to Update

After getting the Figma colors, update these files:

1. **`app/app.css`** - Update CSS custom properties
2. **`app/lib/design-tokens.ts`** - Update TypeScript color tokens
3. **`components.json`** - Update base color if needed
4. **Component files** - Verify color usage matches design

## How to Extract Colors from Figma

1. Select any element with the desired color
2. In the right panel, look at Fill/Stroke properties
3. Copy the hex value (e.g., #48D1CC)
4. Note if there are any opacity values
5. Document color names/purposes from Figma layers

## Verification Checklist

- [ ] All colors extracted from Figma
- [ ] Color scales properly generated (50-900)
- [ ] Semantic mappings make sense
- [ ] Accessibility contrast ratios checked
- [ ] Dark theme colors verified
- [ ] Component colors match Figma design
- [ ] Persian/RTL text remains readable

## Next Steps

1. Provide the actual Figma color values
2. I'll update all the necessary files
3. Test the implementation
4. Verify design consistency
5. Document any custom color usage