# UI Theme System

This directory contains the shared CSS theme and common styles for all UI components in the application.

## Overview

The theme system provides:

- **CSS Custom Properties (Variables)**: Centralized color palette, typography, spacing, and other design tokens
- **Reusable Style Patterns**: Common component styles (buttons, cards, progress bars, tabs, etc.)
- **Consistent Visual Design**: Enforces the "Voxel-Web" / High-Tech Fantasy aesthetic across all components

## Usage

### Basic Usage

Import the theme in your LitElement component:

```javascript
import { LitElement, html, css } from "lit";
import { theme } from "../styles/theme.js";

export class MyComponent extends LitElement {
  static get styles() {
    return [
      theme, // Include theme variables
      css`
        /* Your component-specific styles */
        :host {
          display: block;
        }

        /* Use CSS variables */
        .my-element {
          background: var(--color-bg-panel);
          border: var(--border-width-medium) solid var(--color-border-default);
          color: var(--color-text-primary);
        }
      `,
    ];
  }

  render() {
    return html`<div class="my-element">Content</div>`;
  }
}
```

### Using Common Styles

Import specific style sets for common patterns:

```javascript
import { theme, buttonStyles, cardStyles } from "../styles/theme.js";

export class MyComponent extends LitElement {
  static get styles() {
    return [
      theme,
      buttonStyles,
      cardStyles,
      css`
        /* Component-specific styles */
      `,
    ];
  }

  render() {
    return html`
      <button class="btn btn-primary">Click Me</button>
      <div class="card">Card Content</div>
    `;
  }
}
```

### Using All Common Styles

For components that need many common patterns:

```javascript
import { commonStyles } from "../styles/theme.js";

export class MyComponent extends LitElement {
  static get styles() {
    return [
      commonStyles, // Includes theme + all common styles
      css`
        /* Component-specific styles */
      `,
    ];
  }
}
```

## CSS Variables Reference

### Colors

#### Backgrounds

- `--color-bg-primary`: `rgba(0, 0, 0, 0.8)`
- `--color-bg-secondary`: `rgba(20, 20, 30, 0.9)`
- `--color-bg-tertiary`: `rgba(10, 10, 20, 0.95)`
- `--color-bg-panel`: `rgba(20, 20, 30, 0.9)`
- `--color-bg-card`: `rgba(0, 0, 0, 0.5)`
- `--color-bg-overlay`: `rgba(0, 0, 0, 0.7)`
- `--color-bg-backdrop`: `rgba(0, 0, 0, 0.8)`

#### Borders

- `--color-border-default`: `#555`
- `--color-border-light`: `#666`
- `--color-border-dark`: `#333`
- `--color-border-dashed`: `#444`

#### Accents

- `--color-accent-cyan`: `#00ffff`
- `--color-accent-cyan-dark`: `#00aaff`
- `--color-accent-gold`: `#ffd700`
- `--color-accent-green`: `#00ff00`
- `--color-accent-green-dark`: `#00cc00`
- `--color-accent-red`: `#ff6666`
- `--color-accent-orange`: `#ffaa00`

#### Text

- `--color-text-primary`: `white`
- `--color-text-secondary`: `#aaa`
- `--color-text-tertiary`: `#888`
- `--color-text-muted`: `#666`
- `--color-text-accent`: `#00ffff`
- `--color-text-warning`: `#ffd700`
- `--color-text-success`: `#00ff00`
- `--color-text-error`: `#ff6666`

### Typography

- `--font-family`: `"Courier New", monospace`
- `--font-size-xs` through `--font-size-5xl`: Various sizes
- `--font-weight-normal`: `normal`
- `--font-weight-bold`: `bold`

### Spacing

- `--spacing-xs`: `5px`
- `--spacing-sm`: `10px`
- `--spacing-md`: `15px`
- `--spacing-lg`: `20px`
- `--spacing-xl`: `30px`
- `--spacing-2xl`: `40px`

### Borders

- `--border-width-thin`: `1px`
- `--border-width-medium`: `2px`
- `--border-width-thick`: `3px`
- `--border-radius-sm`: `3px`
- `--border-radius-md`: `4px`
- `--border-radius-lg`: `10px`

### Shadows

- `--shadow-sm`, `--shadow-md`, `--shadow-lg`: Standard shadows
- `--shadow-glow-cyan`, `--shadow-glow-gold`, `--shadow-glow-green`, `--shadow-glow-red`: Glow effects

### Transitions

- `--transition-fast`: `0.1s`
- `--transition-normal`: `0.2s`
- `--transition-slow`: `0.3s`

## Common Style Classes

### Buttons

- `.btn` - Base button style
- `.btn-primary` - Primary action button (green)
- `.btn-danger` - Destructive action button (red)
- `.btn-close` - Close button (X icon)

### Cards & Panels

- `.card` - Card container
- `.panel` - Panel container
- `.panel-header` - Panel header section

### Progress Bars

- `.progress-bar-container` - Container for progress bar
- `.progress-bar-fill` - The fill element
- `.progress-bar-fill.hp` - Health bar (red gradient)
- `.progress-bar-fill.ap` - Action points (orange gradient)
- `.progress-bar-fill.xp` - Experience (gold gradient)
- `.progress-bar-fill.charge` - Charge (blue gradient)
- `.progress-bar-fill.cyan` - Cyan gradient
- `.progress-bar-label` - Label overlay on progress bar

### Tabs

- `.tabs` - Tab container
- `.tab-button` - Individual tab button
- `.tab-button.active` - Active tab
- `.tab-content` - Tab content area

### Tooltips

- `.tooltip` - Tooltip container
- `.tooltip-title` - Tooltip title
- `.tooltip-content` - Tooltip content

### Grids & Layout

- `.grid` - Grid container
- `.grid-auto-fill` - Auto-fill grid (min 80px columns)
- `.grid-auto-fit` - Auto-fit grid (min 300px columns)
- `.flex`, `.flex-column`, `.flex-center`, `.flex-between` - Flexbox utilities
- `.gap-sm`, `.gap-md`, `.gap-lg` - Gap utilities

### Badges

- `.badge` - Base badge
- `.badge-success` - Success badge (green)
- `.badge-warning` - Warning badge (orange)
- `.badge-info` - Info badge (cyan)
- `.badge-error` - Error badge (red)

### Overlays

- `.overlay-container` - Overlay container
- `.overlay-container.active` - Active overlay
- `.overlay-backdrop` - Backdrop element
- `.overlay-content` - Overlay content area

## Migration Guide

When updating existing components to use the theme:

1. **Import the theme**:

   ```javascript
   import { theme } from "../styles/theme.js";
   ```

2. **Include in styles array**:

   ```javascript
   static get styles() {
     return [
       theme,
       css`/* existing styles */`
     ];
   }
   ```

3. **Replace hardcoded values with variables**:

   - Colors: `#555` → `var(--color-border-default)`
   - Spacing: `20px` → `var(--spacing-lg)`
   - Fonts: `"Courier New", monospace` → `var(--font-family)`

4. **Use common style classes where applicable**:

   - Replace custom button styles with `.btn` classes
   - Replace custom card styles with `.card` classes
   - Replace custom progress bars with `.progress-bar-*` classes

5. **Remove duplicate styles** that are now covered by common styles

## Best Practices

1. **Always use CSS variables** instead of hardcoded values
2. **Prefer common style classes** over custom implementations when possible
3. **Extend common styles** rather than replacing them completely
4. **Keep component-specific styles** minimal and focused on unique layouts
5. **Test responsive behavior** - the theme supports mobile/desktop layouts

## Design Principles

The theme enforces the "Voxel-Web" / High-Tech Fantasy aesthetic:

- **Monospace fonts** for a technical, game-like feel
- **Dark backgrounds** with transparency for depth
- **Neon accent colors** (Cyan, Gold, Green) for highlights
- **Pixel-art style borders** (2-3px solid borders)
- **Glow effects** for interactive elements
- **Consistent spacing** and sizing throughout
