🐐

frontend/DESIGN.md

@@ -0,0 +1,119 @@
+# 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`