# 🎨 AeThex Brand Colors

## Primary Palette

### Purple (Primary)
```css
--aethex-purple-50:  #FAF5FF;
--aethex-purple-100: #F3E8FF;
--aethex-purple-200: #E9D5FF;
--aethex-purple-300: #D8B4FE;
--aethex-purple-400: #C084FC;
--aethex-purple-500: #A855F7;  /* Primary brand color */
--aethex-purple-600: #8B5CF6;  /* Main purple */
--aethex-purple-700: #7C3AED;
--aethex-purple-800: #6D28D9;  /* Dark purple */
--aethex-purple-900: #5B21B6;
--aethex-purple-950: #4C1D95;
```

### Cyan (Accent)
```css
--aethex-cyan-50:  #ECFEFF;
--aethex-cyan-100: #CFFAFE;
--aethex-cyan-200: #A5F3FC;
--aethex-cyan-300: #67E8F9;
--aethex-cyan-400: #22D3EE;
--aethex-cyan-500: #06B6D4;  /* Accent color */
--aethex-cyan-600: #0891B2;
--aethex-cyan-700: #0E7490;
--aethex-cyan-800: #155E75;
--aethex-cyan-900: #164E63;
```

### Neutrals
```css
--aethex-gray-50:  #F9FAFB;
--aethex-gray-100: #F3F4F6;
--aethex-gray-200: #E5E7EB;
--aethex-gray-300: #D1D5DB;
--aethex-gray-400: #9CA3AF;
--aethex-gray-500: #6B7280;
--aethex-gray-600: #4B5563;
--aethex-gray-700: #374151;
--aethex-gray-800: #1F2937;
--aethex-gray-900: #111827;  /* Background */
--aethex-gray-950: #030712;  /* Deep background */
```

## Semantic Colors

### UI States
```css
/* Success */
--aethex-success: #10B981;
--aethex-success-bg: rgba(16, 185, 129, 0.1);

/* Warning */
--aethex-warning: #F59E0B;
--aethex-warning-bg: rgba(245, 158, 11, 0.1);

/* Error */
--aethex-error: #EF4444;
--aethex-error-bg: rgba(239, 68, 68, 0.1);

/* Info */
--aethex-info: #06B6D4;
--aethex-info-bg: rgba(6, 182, 212, 0.1);
```

### Glassmorphism
```css
--aethex-glass-bg: rgba(139, 92, 246, 0.1);
--aethex-glass-border: rgba(139, 92, 246, 0.2);
--aethex-glass-hover: rgba(139, 92, 246, 0.15);
--aethex-glass-blur: 10px;
```

## Gradients

### Primary Gradient
```css
background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
```

### Accent Gradient
```css
background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%);
```

### Aurora Gradient (Special)
```css
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
```

## Usage Guidelines

### Backgrounds
- Dark mode primary: `--aethex-gray-900`
- Dark mode secondary: `--aethex-gray-800`
- Light mode primary: `--aethex-gray-50`
- Cards/panels: Use glassmorphism

### Text
- Primary text (dark): `--aethex-gray-50`
- Secondary text (dark): `--aethex-gray-400`
- Primary text (light): `--aethex-gray-900`
- Links: `--aethex-purple-500`

### Buttons
- Primary: `--aethex-purple-600` bg, white text
- Secondary: Transparent bg, `--aethex-purple-500` border
- Accent: `--aethex-cyan-500` bg, white text

### Syntax Highlighting
```css
--syntax-keyword: #C084FC;    /* Purple 400 */
--syntax-string: #34D399;     /* Green */
--syntax-number: #F59E0B;     /* Amber */
--syntax-comment: #6B7280;    /* Gray 500 */
--syntax-function: #06B6D4;   /* Cyan */
```

## Brand Color Examples

### Hero Section
```html
<div style="background: linear-gradient(135deg, #111827 0%, #1F2937 100%);">
  <h1 style="color: #8B5CF6;">AeThex</h1>
  <p style="color: #9CA3AF;">The Cloud-Native Game Engine</p>
  <button style="background: #8B5CF6; color: white;">Get Started</button>
</div>
```

### Feature Cards
```html
<div style="background: rgba(139, 92, 246, 0.1); 
            border: 1px solid rgba(139, 92, 246, 0.2);
            backdrop-filter: blur(10px);">
  <h3 style="color: #06B6D4;">Cloud Services</h3>
  <p style="color: #D1D5DB;">Built-in multiplayer...</p>
</div>
```

## Export Formats

### CSS Variables
```css
:root {
  --primary: #8B5CF6;
  --primary-dark: #6D28D9;
  --accent: #06B6D4;
  --background: #111827;
  --surface: #1F2937;
  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
}
```

### Tailwind Config
```js
colors: {
  aethex: {
    purple: {
      DEFAULT: '#8B5CF6',
      dark: '#6D28D9',
    },
    cyan: {
      DEFAULT: '#06B6D4',
    },
  },
}
```

## Color Accessibility

### Contrast Ratios (WCAG AA)
- Purple 600 on Gray 900: ✅ 7.2:1
- Cyan 500 on Gray 900: ✅ 7.8:1
- Gray 400 on Gray 900: ✅ 4.9:1
- Purple 600 on White: ✅ 4.6:1

All color combinations meet WCAG AA standards for accessibility.
