# Color System Documentation

This document outlines the complete color system used in the Inogen project, ensuring consistency across all components and maintaining accessibility standards.

## Color Palette

### Primary Colors (Green)
Used for primary actions, success states, and brand elements.

```css
--color-primary-50: #f0fdf4
--color-primary-100: #dcfce7
--color-primary-200: #bbf7d0
--color-primary-300: #86efac
--color-primary-400: #4ade80
--color-primary-500: #22c55e  /* Main primary color */
--color-primary-600: #16a34a
--color-primary-700: #15803d
--color-primary-800: #166534
--color-primary-900: #14532d
--color-primary-950: #052e16
```

### Secondary Colors (Blue)
Used for secondary actions and informational elements.

```css
--color-secondary-50: #eff6ff
--color-secondary-100: #dbeafe
--color-secondary-200: #bfdbfe
--color-secondary-300: #93c5fd
--color-secondary-400: #60a5fa
--color-secondary-500: #3b82f6  /* Main secondary color */
--color-secondary-600: #2563eb
--color-secondary-700: #1d4ed8
--color-secondary-800: #1e40af
--color-secondary-900: #1e3a8a
--color-secondary-950: #172554
```

### Teal Colors (Brand Accent)
Used for brand-specific elements, especially in the login interface.

```css
--color-teal-50: #f0fdfa
--color-teal-100: #ccfbf1
--color-teal-200: #99f6e4
--color-teal-300: #5eead4
--color-teal-400: #2dd4bf
--color-teal-500: #14b8a6   /* Main teal color */
--color-teal-600: #0d9488
--color-teal-700: #0f766e
--color-teal-800: #115e59
--color-teal-900: #134e4a
--color-teal-950: #042f2e
```

### Slate Colors (Dark Theme)
Used for dark backgrounds and sophisticated UI elements.

```css
--color-slate-50: #f8fafc
--color-slate-100: #f1f5f9
--color-slate-200: #e2e8f0
--color-slate-300: #cbd5e1
--color-slate-400: #94a3b8
--color-slate-500: #64748b
--color-slate-600: #475569
--color-slate-700: #334155
--color-slate-800: #1e293b   /* Login background */
--color-slate-900: #0f172a
--color-slate-950: #020617
```

### Neutral Colors
Used for text, borders, and general UI elements.

```css
--color-neutral-50: #fafafa
--color-neutral-100: #f5f5f5
--color-neutral-200: #e5e5e5
--color-neutral-300: #d4d4d4
--color-neutral-400: #a3a3a3
--color-neutral-500: #737373
--color-neutral-600: #525252
--color-neutral-700: #404040
--color-neutral-800: #262626
--color-neutral-900: #171717
--color-neutral-950: #0a0a0a
```

### Status Colors

#### Success
```css
--color-success-50: #f0fdf4
--color-success-100: #dcfce7
--color-success-200: #bbf7d0
--color-success-300: #86efac
--color-success-400: #4ade80
--color-success-500: #22c55e
--color-success-600: #16a34a
--color-success-700: #15803d
--color-success-800: #166534
--color-success-900: #14532d
```

#### Error
```css
--color-error-50: #fef2f2
--color-error-100: #fee2e2
--color-error-200: #fecaca
--color-error-300: #fca5a5
--color-error-400: #f87171
--color-error-500: #ef4444
--color-error-600: #dc2626
--color-error-700: #b91c1c
--color-error-800: #991b1b
--color-error-900: #7f1d1d
```

#### Warning
```css
--color-warning-50: #fffbeb
--color-warning-100: #fef3c7
--color-warning-200: #fde68a
--color-warning-300: #fcd34d
--color-warning-400: #fbbf24
--color-warning-500: #f59e0b
--color-warning-600: #d97706
--color-warning-700: #b45309
--color-warning-800: #92400e
--color-warning-900: #78350f
```

#### Info
```css
--color-info-50: #eff6ff
--color-info-100: #dbeafe
--color-info-200: #bfdbfe
--color-info-300: #93c5fd
--color-info-400: #60a5fa
--color-info-500: #3b82f6
--color-info-600: #2563eb
--color-info-700: #1d4ed8
--color-info-800: #1e40af
--color-info-900: #1e3a8a
```

## Semantic Color Tokens

### Light Theme
```css
--background: #ffffff
--foreground: #0a0a0a
--card: #ffffff
--card-foreground: #0a0a0a
--popover: #ffffff
--popover-foreground: #0a0a0a
--primary: #22c55e
--primary-foreground: #ffffff
--secondary: #f5f5f5
--secondary-foreground: #0a0a0a
--muted: #f5f5f5
--muted-foreground: #737373
--accent: #f5f5f5
--accent-foreground: #0a0a0a
--destructive: #ef4444
--destructive-foreground: #ffffff
--border: #e5e5e5
--input: #e5e5e5
--ring: #22c55e
```

### Dark Theme
```css
--background: #020617
--foreground: #f8fafc
--card: #0f172a
--card-foreground: #f8fafc
--popover: #0f172a
--popover-foreground: #f8fafc
--primary: #22c55e
--primary-foreground: #0a0a0a
--secondary: #1e293b
--secondary-foreground: #f8fafc
--muted: #1e293b
--muted-foreground: #94a3b8
--accent: #1e293b
--accent-foreground: #f8fafc
--destructive: #ef4444
--destructive-foreground: #f8fafc
--border: #1e293b
--input: #1e293b
--ring: #22c55e
```

## Usage Guidelines

### Button Variants
- **Primary**: Use `bg-primary` for main actions
- **Secondary**: Use `bg-secondary` for secondary actions
- **Teal**: Use `bg-teal-500` for brand-specific actions (like login)
- **Success**: Use `bg-green-500` for positive actions
- **Info**: Use `bg-blue-500` for informational actions
- **Destructive**: Use `bg-destructive` for dangerous actions

### Text Colors
- **Primary text**: Use `text-foreground`
- **Secondary text**: Use `text-muted-foreground`
- **Success text**: Use `text-green-600`
- **Error text**: Use `text-destructive`
- **Warning text**: Use `text-yellow-600`

### Background Colors
- **Main background**: Use `bg-background`
- **Card background**: Use `bg-card`
- **Muted background**: Use `bg-muted`

### Border Colors
- **Default borders**: Use `border-border`
- **Input borders**: Use `border-input`
- **Focus rings**: Use `ring-ring`

## Accessibility

- All color combinations meet WCAG 2.1 AA contrast requirements
- Colors are designed to work well for users with color vision deficiencies
- Always provide text alternatives for color-coded information

## RTL (Right-to-Left) Support

The color system is designed to work seamlessly with RTL layouts. All color tokens are direction-agnostic and will maintain their semantic meaning regardless of text direction.

## Brand Colors Reference

For quick reference, the main brand colors are:
- **Primary Green**: `#22c55e` (primary-500)
- **Brand Teal**: `#14b8a6` (teal-500)
- **Dark Background**: `#1e293b` (slate-800)
- **Light Background**: `#ffffff` (white)

## Implementation

All colors are available as:
1. CSS custom properties (e.g., `var(--color-primary-500)`)
2. Tailwind utility classes (e.g., `bg-primary-500`)
3. Design tokens in TypeScript (e.g., `colors.primary[500]`)

This ensures consistency across all implementation methods and makes the color system maintainable and scalable.