# Bookra

Remote-first booking SaaS scaffold aligned to the `tdvorak-fullstack` profile with these overrides:

- frontend on Vercel
- backend on Railway
- Neon Postgres + Neon Auth
- Paddle billing
- no Docker-based local runtime

## Workspace

- `apps/frontend` SolidJS frontend
- `apps/backend` Go API
- `apps/auth-service` auth + internal admin service
- `packages/api-client` generated TypeScript client/types from OpenAPI
- `packages/shared-types` shared frontend constants and helpers

## Local development

### Frontend

```bash
npm install
npm run dev:frontend
```

### Backend

```bash
cd apps/backend
go run ./cmd/api
```

Both apps expect remote services:

- Neon Postgres
- Neon Auth
- Paddle

Optional extra service:

- `apps/auth-service` for standalone auth/admin workflows

See `.env.example`, `apps/frontend/.env.example`, and `apps/backend/.env.example`.

## CI/CD

- GitHub Actions CI lives in [`.github/workflows/ci.yml`](/home/tdvorak/Desktop/PROG+HTML/Bookra/.github/workflows/ci.yml:1)
- rollout notes and platform wiring live in [docs/ci-cd.md](/home/tdvorak/Desktop/PROG+HTML/Bookra/docs/ci-cd.md:1)

## Backend database commands

```bash
npm run db:generate
npm run db:migrate:status
npm run db:migrate:up
```

`db:migrate:*` expects `BOOKRA_DATABASE_DIRECT_URL` to be exported in the shell.

## Brand Colors

Bookra uses a sophisticated color system designed for modern booking interfaces with support for both light and dark themes.

### Primary Palette
- **Canvas** (`--color-canvas`): #FFFFFF (light) / #0A0A0A (dark)
- **Canvas Elevated** (`--color-canvas-elevated`): #F8F9FA (light) / #1A1A1A (dark)
- **Canvas Sunken** (`--color-canvas-sunken`): #F1F3F4 (light) / #252525 (dark)

### Accent Colors
- **Primary** (`--color-primary`): #3B82F6
- **Primary Hover** (`--color-primary-hover`): #2563EB
- **Primary Active** (`--color-primary-active`): #1D4ED8

### Semantic Colors
- **Success** (`--color-success`): #10B981
- **Warning** (`--color-warning`): #F59E0B
- **Error** (`--color-error`): #EF4444
- **Info** (`--color-info`): #06B6D4

### Text Colors
- **Text Primary** (`--color-text-primary`): #111827 (light) / #F9FAFB (dark)
- **Text Secondary** (`--color-text-secondary`): #6B7280 (light) / #D1D5DB (dark)
- **Text Muted** (`--color-text-muted`): #9CA3AF (light) / #9CA3AF (dark)

### Border & Surface
- **Border** (`--color-border`): #E5E7EB (light) / #374151 (dark)
- **Surface Glass** (`--color-surface-glass`): rgba(255, 255, 255, 0.8) (light) / rgba(0, 0, 0, 0.8) (dark)

### Shadow System
- **Shadow XS** (`--shadow-xs`): 0 1px 2px 0 rgba(0, 0, 0, 0.05)
- **Shadow SM** (`--shadow-sm`): 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
- **Shadow MD** (`--shadow-md`): 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
- **Shadow LG** (`--shadow-lg`): 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
- **Shadow XL** (`--shadow-xl`): 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
- **Shadow 2XL** (`--shadow-2xl`): 0 25px 50px -12px rgba(0, 0, 0, 0.25)

### Animation Timing
- **Ease Out Expo** (`--ease-out-expo`): cubic-bezier(0.16, 1, 0.3, 1)
- **Ease Spring** (`--ease-spring`): cubic-bezier(0.68, -0.55, 0.265, 1.55)

These colors are implemented as CSS custom properties and are used throughout the frontend application for consistent theming and accessibility.