# Faranda Style Quick Reference

## Colors (CSS Variables)

```
--navy: #001A5A        Primary headers, table headers, text emphasis
--navy-light: #003080  Gradients
--navy-dark: #000F3A   Cover, footer, arch diagrams
--gold: #C9A86A        Accents, dividers, highlights, brand premium
--gold-light: #D8B77A  Hover gold
--gold-pale: #F5EFE0   Section numbers, soft backgrounds
--cream: #FDFAF3       Card bg, alt table rows, highlights
--white: #FFFFFF       Body background
--text: #3E3E44        Body text
--text-light: #6B6B73  Descriptions, meta, subtitles
--border: #E8E4DC      Card borders, row dividers
--success: #2E7D32     Done, active, positive
--warning: #E65100     In progress, attention
--danger: #C62828      Critical, gap, cancellations
```

## Fonts

- **Montaga** (serif): titles, section numbers, metric values, cover
- **Montserrat** (sans-serif, 300-800): body, labels, badges, tables, everything else

## Key Components

| Class | Use |
|---|---|
| `.cover` | Full-page cover with gradient navy bg |
| `.section` + `.section-number` + `.section-title` + `.section-divider` | Document sections (01, 02...) |
| `.metric-grid` + `.metric-card` | KPI grid (add `.gold`/`.navy`/`.success`/`.danger`) |
| `table` + `th` + `td` | Data tables (navy header, cream alt rows) |
| `.badge-done` / `.badge-progress` / `.badge-gap` / `.badge-advantage` | Status indicators |
| `.highlight` + `.highlight-title` | Gold-bordered callout box |
| `.arch-diagram` + `.arch-grid` + `.arch-node` | Architecture diagrams on navy bg |
| `.compare-row` + `.bar-us` + `.bar-them` | Side-by-side comparison bars |
| `.timeline` + `.timeline-item` | Roadmap timeline with gold dots |
| `.roi-card` + `.roi-value` | Prominent KPI callout on navy bg |
| `.gap-item` + `.gap-icon` | Issue/opportunity list with colored icons |
| `.country-grid` + `.country-card` | Geographic/property cards |
| `.eco-flow` + `.eco-item` + `.eco-arrow` | Process flow diagram |
| `.footer` | Navy dark footer bar |
| `.page-break` | Print page break marker |

## Rules

1. Navy dominates, Gold accents only
2. Numbers/KPIs always in Montaga
3. No shadows, no grays, no extra fonts
4. Cream for card backgrounds
5. Always include print styles
6. All text in Spanish by default
7. Cover page required on every report
8. Section numbering: 01, 02, 03...