# Design bible — OneStep Wellness

This project keeps **one CSS file** for all design tokens (colors, fonts, motion, shadows). The main stylesheet imports it automatically.

## Source of truth

| File | Role |
|------|------|
| [`public/pages/design-tokens.css`](public/pages/design-tokens.css) | **Edit this** to change primary/secondary/accent colors, typography, shadows, transitions, and semantic colors (success/error). |
| [`public/pages/styles.css`](public/pages/styles.css) | Layout, components, and patterns. Uses `var(--token-name)` only — no duplicate hex values for brand colors. |

`styles.css` begins with:

```css
@import url('./design-tokens.css');
```

## Typography

- **Body / UI font:** `--font-family-sans` (default: Inter + system fallbacks).
- **Headings:** `--font-family-heading` (currently the same stack; point it at another font when you add it).
- **Weights:** `--font-weight-normal` through `--font-weight-bold`.
- **Webfonts:** Each HTML page should keep the Google Fonts (or other) `<link>` that loads the face you assign in `--font-family-sans`. If you switch fonts in `design-tokens.css`, update those `<link>` tags to match.

## Colors

| Token | Typical use |
|-------|-------------|
| `--primary-color`, `--primary-dark` | Buttons, links, key actions |
| `--secondary-color`, `--accent-color` | Gradients, highlights |
| `--text-dark`, `--text-light` | Body and secondary text |
| `--bg-light`, `--bg-white` | Section backgrounds |
| `--border-color` | Inputs, cards |
| `--color-success`, `--color-error` | Form feedback |

## Elevation & motion

- Shadows: `--shadow-sm` … `--shadow-xl`
- Transitions: `--transition`
- Corner radii (for new rules): `--radius-sm`, `--radius-lg`

## Changing the look site-wide

1. Open `public/pages/design-tokens.css`.
2. Adjust the `:root` variables (e.g. swap `--primary-color` and related hues).
3. Reload any page that links to `/pages/styles.css` — no build step required for static assets.