Screenshot Tokens

---
name: screenshot-tokens
description: Извлечь дизайн-токены из скриншота (цвета OKLCH, типографика, spacing, радиусы, тени) в Tailwind @theme (роль screenshot). Use when нужны только токены без вёрстки; полный код экрана → $screenshot-convert.
---

# Задача: извлечь дизайн-токены из скриншота (screenshot)

Извлеки единую систему дизайн-токенов из скриншота (см. `$screenshot-to-code`, `$tailwind`).

Открой изображение и собери токены как **семантические** CSS-переменные в `@theme` (Tailwind v4, CSS-first):
- **Цвета:** точные hex → **OKLCH**, имена по роли (`--color-primary`/`--color-surface`/`--color-border`/`--color-muted`/`--color-danger`…), не литералы по месту; учти тёмную тему, если видна.
- **Типографика:** семейства (`--font-*`), шкала кегля, насыщенность, межстрочный, трекинг.
- **Spacing:** единая шкала (`--spacing-*`), не случайные px.
- **Радиусы/тени/градиенты/брейкпоинты** — тоже в токены (`--radius-*`, `--shadow-*`, `--breakpoint-*`).

Выдай готовый блок `@import "tailwindcss"; @theme { … }` + таблицу «токен → где на макете». Семантические имена, не значения по месту. Опирайся на `$tailwind`, `$screenshot-to-code`.