# CSS Patterns — Referência de Extração

## Tailwind CSS

Quando o site usa Tailwind, mapeie as classes utilitárias para os tokens:

```
Classes → Tokens
text-blue-600    → --color-primary: #2563EB
bg-gray-50       → --color-surface: #F9FAFB
rounded-lg       → --radius-lg: 8px
p-4              → --space-4: 16px
shadow-md        → --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1)
```

Para projetos com `tailwind.config.js` exposto, procure em:
- `__NEXT_DATA__` no HTML
- `/tailwind.config.js`
- Comentários no CSS compilado

## Styled-Components / Emotion (CSS-in-JS)

Procure por `<style data-styled>` ou `<style data-emotion>` no HTML.
O CSS gerado está serializado inline. Extraia normalmente.

Para theme objects expostos:
```html
<script>window.__THEME__ = {...}</script>
```

## Design Tokens em JSON

Muitas empresas expõem seus tokens em:
- `/tokens.json`
- `/design-tokens.json`
- `/_tokens`

Faça web_fetch nesses paths.

## CSS Custom Properties Dinâmicas

Quando os valores são setados via JavaScript (ex: `document.documentElement.style.setProperty`),
procure no código JS por padrões como:
```js
setProperty('--color-primary', ...)
document.body.style.setProperty(...)
```

## Figma Tokens Plugin

Alguns sites hospedam seus tokens via:
- `https://api.figma.com/v1/files/...` (requer auth, pule)
- URLs públicas de CDN com o JSON de tokens

## Extração de Fontes

1. Procure `<link rel="preconnect" href="https://fonts.googleapis.com">`
2. Procure `@import url('https://fonts.googleapis.com/css2?family=...')`
3. Extraia: nome da fonte, pesos carregados, display=swap

Exemplo de extração:
```
URL: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap
Resultado:
  --font-body: 'Inter', sans-serif;
  Pesos disponíveis: 400, 500, 600, 700
```

## Sombras — Como Identificar Elevação

| Nível | Padrão típico | Uso |
|-------|--------------|-----|
| 0 (flat) | none | Buttons ghost, inputs |
| 1 (sm) | 0 1px 2px rgba(0,0,0,0.05) | Dropdowns, tooltips |
| 2 (md) | 0 4px 6px -1px rgba(0,0,0,0.1) | Cards |
| 3 (lg) | 0 10px 15px -3px rgba(0,0,0,0.1) | Modais, popovers |
| 4 (xl) | 0 20px 25px -5px rgba(0,0,0,0.1) | Sheets, drawers |

## Inferência de Design Tokens

Quando valores não estão explícitos, use estas regras:

**Escala de cores:**
- Se tem `#3B82F6` (primary), a escala é provavelmente Tailwind Blue
- Se tem `--color-primary-500`, o sistema usa Tailwind/Radix colors

**Escala de espaçamento:**
- Se múltiplos de 4: sistema de 4px base
- Se múltiplos de 8: sistema de 8px base
- Se valores como 6, 10, 14: sistema personalizado

**Border-radius:**
- 0px → design sharp/angular
- 4-6px → design conservador/corporativo
- 8-12px → design moderno/amigável
- 16px+ → design arredondado/playful
- 9999px → estilo pill/soft UI
