# BELA65 — Style Guide
### The frozen design system, in words. Live demo: `styleguide.html`

> Every page inherits these tokens. Do not fork them. Tokens are defined in `css/styles.css :root` (light) and `[data-theme="dark"]`.

---

## Color

| Token | Light | Dark | Use |
|-------|-------|------|-----|
| `--accent` | `#4f46e5` | `#8b93f8` | Brand, buttons, links, active states |
| `--grad` | indigo→violet gradient | same | Primary buttons, hero accents, passport, CTA band |
| `--text` | `#191d24` | `#e9ebf0` | Body text |
| `--text-soft` | `#3d4552` | `#c3c9d4` | Secondary copy |
| `--text-muted` | `#6b7480` | `#8b94a3` | Tertiary / captions |
| `--bg` | `#ffffff` | `#0b0d12` | Page background |
| `--bg-subtle` | `#f6f7f9` | `#12151d` | Alternating sections, cards |
| `--border` | `#e7e9ee` | `#222732` | Dividers, card edges |

Status colors: `--ok` (green), `--warn` (amber), `--info` (blue), each with a soft background variant. Used by `.badge` and check marks.

**Rule:** never introduce a new brand color. Compose with the tokens above (and `color-mix`).

## Typography

- **Family:** system sans (`-apple-system, Segoe UI, Inter, …`); mono for code/technical labels.
- **Scale:** Display 38–66px · H1 34px · H2 23–40px · H3 18px · body 16–19px.
- **Line-height:** 1.65 body; 1.05–1.28 headings. **Tracking** tightens as size grows (−.02 to −.03em on display).
- **Reading level:** Grade 8–9 for marketing copy (see the frozen Voice & Tone).

## Spacing & layout

- **Container:** max-width `1120px` (grids) / `760px` (prose), 28px side padding.
- **Section rhythm:** 92px vertical (64px `.tight`, 52px on phones). Alternate `.section` / `.section.alt` for cadence.
- **Radius:** 12px default · 8px small · 18px large. **Shadows:** `--shadow` / `--shadow-sm`.
- **Grid:** responsive `auto-fit minmax()` grids; one idea per row on mobile.

## Motion

- **Reveal-on-scroll** (`.reveal` → `.in`) via `animation.js`. Degrades to visible without JS.
- **Easing:** `cubic-bezier(.16,1,.3,1)` (`--ease`). Hover lifts 1–3px.
- **Reduced motion:** all animation disabled under `prefers-reduced-motion`.

## Buttons

- `.btn.btn-primary` — gradient, white text, the one primary action per screen.
- `.btn.btn-ghost` — bordered, secondary.
- `.btn-lg` — larger hero/CTA size.
Never invent other button styles.

## Voice (inherited from the frozen Foundation)

Calm, clear, confident. Understandable by a school student, a business owner, and a CTO. No hype words (revolutionary, game-changing, magical, seamless-as-filler). Every claim within the Claims Ledger. Every technical term paired with its plain-language line on first use.

## Dark mode

Toggle persists to `localStorage`; first visit follows `prefers-color-scheme`. Every component is designed in both themes — verify both when adding anything.

---

*See `COMPONENTS.md` for the component markup, and `styleguide.html` for the live rendering.*