# Design Language

## Aesthetic
Dark fantasy TCG aesthetic. Warm golds and bronzes on near-black brown backgrounds. Cinzel for headings/labels/buttons, Crimson Text for body/prose/inputs.

## Colors

All core colors are available as CSS custom properties on `:root` in `app.css` (e.g. `var(--color-bg)`, `var(--color-bronze)`).

| Role | Value |
|------|-------|
| Page background | `#0d0a04` |
| Header background | `#1a1008` |
| Modal / dark surface | `#110d04` |
| Raised surface | `#3d2507` |
| Primary text / accent | `#f0d080` (gold) |
| Secondary text | `rgba(240, 180, 80, 0.6)` |
| Placeholder text | `rgba(240, 180, 80, 0.3–0.4)` |
| Interactive accent (buttons, borders, hover) | `#c8861a` (bronze-orange) |
| Interactive accent hover | `#e09820` |
| Border / divider | `#6b4c1e` |
| Subtle border | `rgba(107, 76, 30, 0.3–0.5)` |
| Button text | `#fff8e0` |
| Error / delete | `#c84040` |
| Success / positive | `#6aaa6a` |
| Energy cost indicator | `#6ea0ec` |

## Typography
- **Headings / labels / buttons**: Cinzel (Google Fonts), weights 400/700/900
- **Body / prose / inputs**: Crimson Text (Google Fonts), weights 400/600; italic for flavor/secondary text
- Button and label text: **uppercase**, `letter-spacing: 0.06–0.1em`
- Form labels: uppercase, `letter-spacing: 0.08em`

### Type Scale

All type scale tokens are CSS custom properties on `:root` in `app.css`.

| Token | Value | Use for |
|-------|-------|---------|
| `--text-xs` | `9px` | Fine print, badges, metadata labels |
| `--text-sm` | `11px` | Secondary text, captions, small labels |
| `--text-base` | `13px` | Default body text, buttons, card details |
| `--text-md` | `15px` | Form inputs, emphasized body text |
| `--text-lg` | `18px` | Section headings, card titles |
| `--text-xl` | `22px` | Page headings, prominent labels |
| `--text-2xl` | `28px` | Large display headings |
| `--text-3xl` | `36px` | Hero headings, splash text |

## Buttons

| Variant | Background | Border | Text |
|---------|-----------|--------|------|
| Primary | `#c8861a` | none | `#fff8e0` |
| Secondary | `#3d2507` | `1px solid rgba(107,76,30,0.4)` | `#f0d080` |
| Destructive | `rgba(180,40,40,0.8)` | none | `#fff` |

### Sizes

All button size tokens are CSS custom properties on `:root` in `app.css`.

| Size | Padding | Font-size | Border-radius | Use for |
|------|---------|-----------|---------------|---------|
| Small | `4px 10px` | `10px` | `var(--radius-sm)` | Toolbar filters, sort toggles, inline actions, edit/delete |
| Medium | `8px 18px` | `12px` | `var(--radius-md)` | Card actions, done/choose, friend, secondary, cancel |
| Large | `10px 32px` | `13px` | `var(--radius-md)` | Primary CTAs, auth submit, play, buy, accept trade |

- Font: Cinzel 700 uppercase, letter-spacing 0.06–0.1em
- Disabled: opacity 0.5; hover: lighten background or brighten border + text

## Inputs / Forms
- Background: `#1a1008`; border-radius: 6px; color: `#f0d080`; font: Crimson Text 15px
- Text inputs: `1.5px solid #6b4c1e`; focus border: `#c8861a`
- Selects: `1.5px solid #6b4c1e`
- Placeholder: `rgba(240, 180, 80, 0.4)`; accent-color (checkboxes, ranges): `#c8861a`

## Containers / Panels

Border-radius, shadows, z-index layers, and spacing are available as CSS custom properties on `:root` in `app.css` (e.g. `var(--radius-lg)`, `var(--shadow-card)`, `var(--z-modal)`, `var(--space-md)`).

- Border-radius: 10–12px; box-shadow: `0 4px 24px rgba(0,0,0,0.5)`
- Borders: `1–2px solid #6b4c1e` standard, `#c8861a` for emphasis
- Backgrounds: `#1a1008` (surface), `#3d2507` (raised)
- Card hover lift: `translateY(-4px) scale(1.02)`, shadow `0 12px 40px rgba(0,0,0,0.6)`

## Transitions
- Default: `0.15s ease` on background, border-color, color, transform
- Card hover: `0.2s ease`

## Card Type Colors (CSS vars `--bg` / `--header`)

| Type | Background | Header |
|------|-----------|--------|
| person | `#f0e0c8` | `#b87830` |
| location | `#d8e8d4` | `#4a7a50` |
| artwork | `#e4d4e8` | `#7a5090` |
| life_form | `#ccdce8` | `#3a6878` |
| event | `#e8d4d4` | `#8b2020` |
| group | `#e8e4d0` | `#748c12` |
| science_thing | `#c7c5c1` | `#060c17` |
| vehicle | `#c7c1c4` | `#801953` |
| organization | `#b7c1c4` | `#3c5251` |

## Rarity Badge Colors

| Rarity | Background | Text |
|--------|-----------|------|
| common | `#c8c8c8` | `#333` |
| uncommon | `#4a7a50` | `#fff` |
| rare | `#2a5a9b` | `#fff` |
| super_rare | `#7a3a9b` | `#fff` |
| epic | `#9b3a3a` | `#fff` |
| legendary | `#b87820` | `#fff` |

## Card Component
- Outer border and internal borders: `#000` (pure black) — these are structural borders within the card face, distinct from the themed `#6b4c1e` borders on containers/panels.
- Card background: `#111`; border-radius: 12px; padding: 7px

## Spacing
- Page padding: `2rem`; section gap: `1–1.5rem`; component internal gap: `0.4–0.75rem`