import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';

<Meta title="Foundations/Colors" />

# Colors

The Hensei color system is built around a neutral grey scale, accent colors, and element-specific palettes for the six Granblue Fantasy elements.

## Grey Scale

The foundation of our color system. Used for backgrounds, text, borders, and UI elements.

<ColorPalette>
  <ColorItem
    title="Grey 00"
    subtitle="$grey-00"
    colors={{ Black: '#000000' }}
  />
  <ColorItem
    title="Grey 10-20"
    subtitle="Dark backgrounds"
    colors={{ 'Grey 10': '#111111', 'Grey 15': '#191919', 'Grey 20': '#212121' }}
  />
  <ColorItem
    title="Grey 30-50"
    subtitle="Dark mode UI"
    colors={{ 'Grey 30': '#2f2f2f', 'Grey 40': '#444444', 'Grey 50': '#777777' }}
  />
  <ColorItem
    title="Grey 60-80"
    subtitle="Secondary text, borders"
    colors={{ 'Grey 60': '#a9a9a9', 'Grey 70': '#c6c6c6', 'Grey 80': '#e9e9e9' }}
  />
  <ColorItem
    title="Grey 85-100"
    subtitle="Light backgrounds"
    colors={{ 'Grey 85': '#efefef', 'Grey 90': '#f5f5f5', 'Grey 100': '#ffffff' }}
  />
</ColorPalette>

## Accent Colors

Primary accent colors for interactive elements and highlights.

<ColorPalette>
  <ColorItem
    title="Blue (Primary)"
    subtitle="Links, primary actions"
    colors={{ 'Light': '#275dc5', 'Light Focus': '#0c398d', 'Dark': '#6195f4', 'Dark Focus': '#275dc5' }}
  />
  <ColorItem
    title="Yellow (Highlight)"
    subtitle="Selected items, highlights"
    colors={{ 'Light': '#c89d39', 'Dark': '#f9cc64', 'Highlight': '#ffed4c' }}
  />
  <ColorItem
    title="Error"
    subtitle="Destructive actions"
    colors={{ 'Red': '#d13a3a', 'Error BG Light': '#fce8e8', 'Error BG Dark': '#3d1515' }}
  />
</ColorPalette>

## Element Colors

Granblue Fantasy element-specific colors used for theming characters, weapons, and summons.

### Wind

<ColorPalette>
  <ColorItem
    title="Wind"
    subtitle="Green element"
    colors={{
      'Text Light': '#006a45',
      'Text Dark': '#1dc688',
      'BG': '#3ee489',
      'Portrait': '#cdffed'
    }}
  />
</ColorPalette>

### Fire

<ColorPalette>
  <ColorItem
    title="Fire"
    subtitle="Red element"
    colors={{
      'Text Light': '#6e0000',
      'Text Dark': '#ec5c5c',
      'BG': '#fa6d6d',
      'Portrait': '#ffcdcd'
    }}
  />
</ColorPalette>

### Water

<ColorPalette>
  <ColorItem
    title="Water"
    subtitle="Blue element"
    colors={{
      'Text Light': '#00639c',
      'Text Dark': '#5cb7ec',
      'BG': '#6cc9ff',
      'Portrait': '#cdedff'
    }}
  />
</ColorPalette>

### Earth

<ColorPalette>
  <ColorItem
    title="Earth"
    subtitle="Orange element"
    colors={{
      'Text Light': '#8e3c0b',
      'Text Dark': '#ec985c',
      'BG': '#fd9f5b',
      'Portrait': '#ffe2cd'
    }}
  />
</ColorPalette>

### Light

<ColorPalette>
  <ColorItem
    title="Light"
    subtitle="Yellow element"
    colors={{
      'Text Light': '#715100',
      'Text Dark': '#c59c0c',
      'BG': '#e8d633',
      'Portrait': '#fffacd'
    }}
  />
</ColorPalette>

### Dark

<ColorPalette>
  <ColorItem
    title="Dark"
    subtitle="Purple element"
    colors={{
      'Text Light': '#560075',
      'Text Dark': '#c65cec',
      'BG': '#de7bff',
      'Portrait': '#f2cdff'
    }}
  />
</ColorPalette>

## Special Purpose Colors

### Extra Weapons (Purple)

<ColorPalette>
  <ColorItem
    title="Extra Purple"
    subtitle="Additional weapon slots"
    colors={{
      'BG Light': '#ecebff',
      'BG Dark': '#635fb7',
      'Card Light': '#d5d3f6',
      'Primary': '#8c86ff'
    }}
  />
</ColorPalette>

### Subaura Summons (Orange)

<ColorPalette>
  <ColorItem
    title="Subaura Orange"
    subtitle="Sub-aura summon slots"
    colors={{
      'BG Light': '#ffebd9',
      'BG Dark': '#6b401b',
      'Card Light': '#facea7',
      'Primary': '#d08f57'
    }}
  />
</ColorPalette>

### Game Tokens

<ColorPalette>
  <ColorItem
    title="Charge Attack"
    subtitle="Ougi/Charge attack indicator"
    colors={{ 'Background': '#ffb461', 'Text': '#885243' }}
  />
  <ColorItem
    title="Full Auto"
    subtitle="Full auto mode indicator"
    colors={{ 'Background': '#ffed4c', 'Text': '#a39200' }}
  />
  <ColorItem
    title="Auto Guard"
    subtitle="Auto guard indicator"
    colors={{ 'Background': '#b6b2fc', 'Text': '#4f3c79' }}
  />
</ColorPalette>

## CSS Custom Properties

All colors are available as CSS custom properties through the theme system. They automatically switch between light and dark mode values.

```css
/* Usage in components */
.my-component {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

/* Element-specific theming */
.wind-themed {
  background: var(--wind-bg);
  color: var(--wind-text);
}
```

### Common Variables

| Variable | Description |
|----------|-------------|
| `--background` | Page background |
| `--card-bg` | Card/panel background |
| `--text-primary` | Primary text color |
| `--text-secondary` | Secondary/muted text |
| `--border-subtle` | Subtle borders |
| `--accent-blue` | Primary accent |
| `--accent-yellow` | Highlight/selection |
