# AGENTS.md

Шаблон Monochrome Supply — premium fashion e-commerce; сохраняй product-first минимализм, строгую сетку, реальные commerce-секции и понятные состояния выбора размера/цвета.

## Project Specifics

- Source content lives in `src/entities/site-content.ts`; keep visible copy there or directly in route JSX.
- `src/app` — только route wrappers; композиция каждой страницы живёт в отдельном widget (`src/widgets/<page>-page.tsx`). Header/footer — в `src/widgets/site-shell.tsx`. См. File Map.
- Keep cards at 8px radius or less and preserve the selected palette in `src/app/globals.css`.
- This is a static frontend template: do not add real payments, auth, persistence, external API calls, or backend contracts without an explicit product request.
- After changes run `pnpm lint` and `pnpm build`.

## Визуальные правки

- Кириллица обязательна для видимого текста и выбранных Google Fonts.
- При AI-правках сохраняйте доменные блоки этого шаблона: они отличают проект от generic landing.

## Design System

Источник токенов — `src/app/globals.css` (`@theme inline` + `:root`/`.dark`). Шрифты: заголовки и `.font-display` — **Montserrat** (`--font-display`), body — **Inter** (`--font-sans`); mono замаплен на тот же display. Работай через семантические классы Tailwind (`bg-foreground`, `text-muted-foreground`, `border-border`), не хардкодь hex/oklch.

Личность: **premium monochrome fashion** — почти бесцветная ахроматическая палитра (всё в нейтральных серых, `chroma ≈ 0`), near-black «ink» как контраст, и единственный тёплый янтарный `accent` (oklch 0.72 0.16 71) для редких акцентов. Фотографии сознательно `grayscale` и расцвечиваются (`group-hover:grayscale-0`) только при наведении — это ключевой приём бренда.

| Роль | Light | Характер |
|---|---|---|
| `background` | почти белый neutral (0.985) | основной фон страниц |
| `foreground` | near-black ink (0.13) | текст + инверсный CTA/footer (`bg-foreground text-background`) |
| `primary` | near-black ink | логотип-плашка, primary-кнопки |
| `secondary` | светло-серый (0.94) | бейджи, теги товаров |
| `accent` | тёплый янтарь | редкий точечный акцент (по умолчанию почти не используется) |
| `muted` | серый (0.955 / fg 0.48) | фон image-плейсхолдеров, вторичный текст |
| `card` | чистый белый (1.0) | карточки на фоне 0.985 |
| `border` | мягкий серый (0.86) | тонкие границы (`border border-border`, НЕ толстые) |

Узнаваемые приёмы (держи их, это и есть «лицо» проекта):
- **Мягкие углы:** `--radius` = 0.375rem; почти всё — `rounded-md`. Никаких острых или сильно скруглённых форм.
- **Тонкие границы:** `border border-border` (1px), не толстые brutalist-рамки.
- **Grayscale → color на hover:** фото идут `object-cover grayscale`, при наведении карточки — `transition group-hover:grayscale-0` (+ лёгкий `group-hover:scale-[1.03]`).
- **Hover-lift с мягкой тенью:** `hover:-translate-y-1 hover:shadow-[0_24px_60px_rgba(0,0,0,0.09)]` — приподнятая карточка вместо жёсткого offset-shadow.
- **Типографика:** `font-semibold` (не black), очень крупные плотные заголовки (`text-7xl`+, `leading-[0.94]`), eyebrow — `uppercase tracking-[0.16em] text-muted-foreground`.
- **Инверсные блоки:** акцентные секции (footer, CTA, средняя карточка lookbook) — `bg-foreground text-background` с `text-background/70` для вторичного текста.
- **Фон-фактура:** `.fashion-fabric` — тонкая тканевая сетка для hero; фиксированная max-ширина контента `max-w-[1320px]`.

Do / Don't:
- **Do:** держи ахроматическую палитру, тонкие границы, grayscale-фото, product-first сетки, крупную сдержанную типографику.
- **Don't:** яркие цвета/градиенты, толстые рамки, жёсткие offset-тени, `rounded-none` или `rounded-full` на карточках, `font-black` — это ломает premium-минимализм.

## File Map

| Route | Widget |
|---|---|
| `/` | `src/widgets/home-page.tsx` (`HomePage`) |
| `/catalog` | `src/widgets/catalog-page.tsx` (`CatalogPage`) |
| `/product/classic-overshirt` | `src/widgets/product-detail-page.tsx` (`ProductDetailPage`) |
| `/lookbook` | `src/widgets/lookbook-page.tsx` (`LookbookPage`) |
| `/cart` | `src/widgets/cart-page.tsx` (`CartPage`) |
| `/shipping` | `src/widgets/shipping-page.tsx` (`ShippingPage`) |

Переиспользуемые блоки:
- `src/widgets/site-shell.tsx` — `SiteHeader` + `SiteFooter` (обёртка всех страниц через `app/layout.tsx`).
- `src/widgets/featured-grid.tsx` — `FeaturedGrid` (Home, Catalog).
- `src/widgets/collection-board.tsx` — `CollectionBoard` (Home, Lookbook).
- `src/widgets/product-assurance.tsx` — `ProductAssurance` (Home, Product).
- `src/shared/ui/inner-hero.tsx` — `InnerHero` (заголовочная секция внутренних страниц).
- `src/shared/ui/icon-cards.tsx` — `IconCards` (Shipping, Product).
- `src/shared/ui/info-columns.tsx` — `InfoColumns` (Shipping, Cart).
- `src/shared/ui/split-story.tsx` — `SplitStory` (Home, Lookbook).

Одноразовые блоки колоцированы со своей страницей: `PageHero`/`MetricStrip`/`TestimonialBand` в `home-page.tsx`, `CatalogToolbar`/`PricingTiles` в `catalog-page.tsx`, `LookbookGrid` в `lookbook-page.tsx`, `CartPreview` в `cart-page.tsx`, `ProductDetail`/`OptionRow`/`CtaPanel` в `product-detail-page.tsx`.