# Iliya Design System

> Placeholder tokens. Finalize during the design phase. All defined in
> `assets/css/site.css` (`@theme` block).

## Border Radius
**Global: 0px** — sharp corners everywhere. No `rounded-*` classes.

## Typography
- **Body**: AzarMehr (variable, 100–900) — `--font-body`
- **Headings**: Dana VF (variable, 10–990) — `--font-display`, class `.font-dana`
- **Persian numerals**: `font-feature-settings: "ss02"` (auto on body + headings)
- **Direction**: RTL

## Colors — Luxury Green + Gold (from brand logo)
| Token | Value | Usage |
|-------|-------|-------|
| `--color-accent` | `#168f4c` | Emerald brand green — CTAs, links, active states |
| `--color-gold` / `--color-gold-light` | `#c8a44d` / `#f0d98a` | Metallic gold — eyebrows, accents, hairlines, icons on dark |
| `--color-dark` | `#08160f` | Deep green-black — hero / dark sections / footer |
| `--color-heading` | `#0a2418` | Heading text (deep green) |
| `--color-body` | `#44574d` | Body text |
| `--color-muted` | `#6b8377` | Secondary text |
| `--color-border` | `#e4ece7` | Light borders |
| `--color-bg-section` | `#f6faf7` | Section backgrounds (cool green-white) |

Scales: `--color-accent-50…950` (emerald), `--color-gold-50…700`, `--color-steel-50…950`
(neutrals recolored to warm green-greys — names kept for markup compat).

### Gold utilities
- `.gold-text` — gold gradient clipped to text (luxury headings/highlights)
- `.gold-bar` — gold gradient fill (bars, icon squares, accent blocks)
- `.rule-gold` — thin gold hairline
- `.btn-gold` — gold gradient button (on dark)

### Logo assets (`assets/images/`)
- `logo-mark.webp` — icon only (header/footer)
- `logo-stack.webp` — full stacked logo (hero watermark / about)
- `logo-full.png` — original hi-res

## Layout
- Container: `max-w-[1200px]`, centered, responsive inline padding.
- Section padding: `py-16` (content), `py-24` (hero).
- Grids: `gap-8`, 1 → 2 → 3 columns at `md` / `lg`.
- Breakpoints (custom): xs 700 · sm 800 · md 940 · lg 1310 · xl 1450.

## Components present
- Header with primary nav + mobile toggle
- Footer with footer menu + widget area
- Post card (`template-parts/post-card.php`)
- Breadcrumb, search form, pagination
- Scroll-reveal / stagger via Motion (`data-motion`, `data-motion-group`)

## Animation (Motion)
- `data-motion="fade-up"` + optional `data-motion-delay="0.1"` — reveal on scroll.
- `data-motion-group` on a container — stagger children in.
- Respects `prefers-reduced-motion`.