# Porchlight Branding & Theme Design

## Summary

Create a logo, favicon, and redesigned CSS theme for the project, now branded as "Porchlight."

## Logo

**Concept:** Icon + wordmark combo. The icon is a minimal doorway/arch with a light element (filled circle) above it, suggesting an entrance illuminated by a porch light.

**Variants:**
- Full combo (icon + "Porchlight" text) — page header in `base.html`
- Icon only — favicon and tight spaces

**Files:**
- `static/logo.svg` — standalone icon SVG
- `static/favicon.png` — 32x32 PNG of the icon

## Color Palette

Warm amber/gold accent on neutral stone backgrounds. Automatic dark mode via `prefers-color-scheme`.

### Light Mode
| Variable | Value | Description |
|---|---|---|
| `--bg` | `#fafaf9` | Warm white (stone-50) |
| `--fg` | `#1c1917` | Warm black (stone-900) |
| `--fg-muted` | `#78716c` | Secondary text (stone-500) |
| `--accent` | `#d97706` | Amber-600 |
| `--accent-hover` | `#b45309` | Amber-700 |
| `--accent-fg` | `#ffffff` | White on accent |
| `--surface` | `#f5f5f4` | Card/input bg (stone-100) |
| `--border` | `#d6d3d1` | Stone-300 |
| `--error-bg` | `#fef2f2` | Red-50 |
| `--error-fg` | `#dc2626` | Red-600 |
| `--success-bg` | `#f0fdf4` | Green-50 |
| `--success-fg` | `#16a34a` | Green-600 |

### Dark Mode
| Variable | Value | Description |
|---|---|---|
| `--bg` | `#1c1917` | Stone-900 |
| `--fg` | `#fafaf9` | Stone-50 |
| `--fg-muted` | `#a8a29e` | Stone-400 |
| `--accent` | `#f59e0b` | Amber-500 |
| `--accent-hover` | `#fbbf24` | Amber-400 |
| `--accent-fg` | `#1c1917` | Dark text on bright accent |
| `--surface` | `#292524` | Stone-800 |
| `--border` | `#44403c` | Stone-700 |
| `--error-bg` | `#451a1a` | Dark red |
| `--error-fg` | `#f87171` | Red-400 |
| `--success-bg` | `#14532d` | Dark green |
| `--success-fg` | `#4ade80` | Green-400 |

## CSS Redesign

Full rewrite of `style.css` with a design system:

- **Custom properties** for colors, spacing (4px base), typography, and radius
- **System font stack** (no webfonts)
- **Centered single-column layout** (`max-width: 40rem`)
- **Header bar** with logo + wordmark
- **Button variants:** primary (amber), secondary (outlined), danger (red)
- **Form styling:** full-width inputs, labels, focus states, error display
- **Cards/sections:** surface background with border for grouping
- **Alerts:** error (`role="alert"`) and success (`role="status"`)
- **Typography scale:** h1-h3, body, small
- **Accessibility:** skip link, `:focus-visible`, `.sr-only`, `prefers-reduced-motion`
- **Dark mode** via `@media (prefers-color-scheme: dark)`

## Template Updates

- `base.html`: add header with logo, update `<title>` to "Porchlight", add favicon link
- `login.html`: update title to "Login — Porchlight"
- `manage/credentials.html`: update title to "Credentials — Porchlight"
- `app.py`: update FastAPI title to "Porchlight"

## Files Changed

| File | Action |
|---|---|
| `static/style.css` | Rewrite |
| `static/logo.svg` | Create |
| `static/favicon.png` | Create |
| `templates/base.html` | Update (header, favicon, title) |
| `templates/login.html` | Update (title) |
| `templates/manage/credentials.html` | Update (title) |
| `app.py` | Update (title) |