# Design System — HGTX Commander

> Referência técnica de tokens e padrões — light + dark.  
> **Fonte da verdade (código):** `src/index.css` + `tailwind.config.ts`.  
> Tema aplicado via `next-themes` (`class` no `<html>`, `storageKey: hgtx-commander-theme`).

## Cor de marca (azul HGTX)

Azul institucional usado em botões primários, links, anéis de foco e destaques do Commander.

| Papel | Light | Dark |
|-------|-------|------|
| **Primária** | `hsl(210 100% 33%)` · **#0054A8** | `hsl(210 90% 52%)` · **#1685F3** |
| Hover | `hsl(210 100% 28%)` · #00478F | `hsl(210 95% 46%)` · #0675E5 |
| Pressed | `hsl(210 100% 24%)` · #003D7A | `hsl(210 100% 40%)` · #0066CC |
| Fundo sutil | `hsl(210 55% 96%)` · #EFF5FB | `hsl(210 50% 14%)` · #122033 |
| Focus ring | `rgba(0, 85, 164, 0.28)` | `rgba(51, 136, 255, 0.35)` |

Referência histórica de marca: ~`#0055A4` / `#004080` — no código o token `--primary` (light) resolve para **#0054A8**.

**Tailwind / shadcn:** `bg-primary`, `text-primary`, `border-primary`, `ring-ring` (usa `--ring`, alinhado ao primário).

---

## Fonte

Inter — Google Fonts

Pesos: 400, 500, 600, 700

Import: `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap`

Token: `--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif`

---

## Cores

Valores em **HSL sem vírgula** (formato shadcn: `hsl(var(--token))`). Hex entre parênteses para referência visual.

### Primária e estados

| Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso |
|-----------|-------------------|------------------|-----------------|-----|
| `--primary` | 210 100% 33% · #0054A8 | 210 90% 52% · #1685F3 | `bg-primary` `text-primary` | CTAs, enviar, links ativos |
| `--primary-foreground` | 0 0% 100% · #FFFFFF | 0 0% 100% · #FFFFFF | `text-primary-foreground` | Texto sobre primário |
| `--primary-hover` | 210 100% 28% · #00478F | 210 95% 46% · #0675E5 | `bg-primary-hover` | Hover botões primários |
| `--primary-pressed` | 210 100% 24% · #003D7A | 210 100% 40% · #0066CC | `bg-primary-pressed` | Active / pressed |
| `--primary-light` | 210 55% 96% · #EFF5FB | 210 50% 14% · #122033 | `bg-primary-light` | Fundo de destaque suave |
| `--ring` | 210 100% 33% | 210 90% 52% | `ring-ring` | Focus visível (inputs) |
| `--focus-ring` | rgba(0, 85, 164, 0.28) | rgba(51, 136, 255, 0.35) | sombra manual | Focus em componentes custom |

### Semânticas (feedback)

| Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso |
|-----------|-------------------|------------------|-----------------|-----|
| `--success` | 134 61% 41% · #29A847 | 141 71% 48% · #23D160 | `bg-success` `text-success` | Online, confirmação |
| `--success-foreground` | 0 0% 100% | 216 48% 8% | `text-success-foreground` | Texto sobre success |
| `--destructive` | 0 84% 60% | 0 84% 60% | `bg-destructive` | Erro, excluir |
| `--destructive-foreground` | 0 0% 100% | 0 0% 100% | `text-destructive-foreground` | Texto sobre destructive |
| `--warning` | 38 92% 50% | 38 92% 50% | `bg-warning` `text-warning` | Alertas, badge “Pessoal” |
| `--warning-foreground` | 209 11% 15% | 216 48% 8% | `text-warning-foreground` | Texto sobre warning |

### Superfícies (page, card, sidebar)

| Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso |
|-----------|-------------------|------------------|-----------------|-----|
| `--background` | 0 0% 100% · #FFFFFF | 216 48% 8% · #0B121E | `bg-background` | Fundo principal / chat |
| `--foreground` | 209 11% 15% · #22262A | 0 0% 100% · #FFFFFF | `text-foreground` | Texto principal |
| `--card` | 0 0% 100% · #FFFFFF | 216 42% 11% · #101A28 | `bg-card` | Cards, modais, composer |
| `--card-foreground` | 209 11% 15% | 0 0% 100% | `text-card-foreground` | Texto em cards |
| `--popover` | 0 0% 100% | 216 42% 11% | `bg-popover` | Dropdowns, selects |
| `--sidebar-background` | 210 17% 98% · #F8FAFB | 216 50% 9% · #0B1522 | `bg-sidebar` | Sidebar Commander / módulos |
| `--sidebar-foreground` | 209 11% 15% | 0 0% 100% | `text-sidebar-foreground` | Texto na sidebar |
| `--sidebar-border` | 220 13% 91% · #E5E7EB | 212 12% 21% · #2F363F | `border-sidebar-border` | Divisor da sidebar |
| `--sidebar-accent` | 210 70% 94% · #E3EEFC | 210 45% 16% · #16283D | `bg-sidebar-accent` | Item de nav ativo / hover |
| `--sidebar-accent-foreground` | 210 100% 33% | 210 85% 62% · #5BA3EB | `text-sidebar-accent-foreground` | Texto no item ativo |
| `--muted` | 210 17% 96% · #F3F6F8 | 216 38% 13% · #15202E | `bg-muted` | Fundos secundários |
| `--accent` | 210 70% 94% | 210 45% 16% | `bg-accent` | Hover suave, chips |
| `--accent-foreground` | 210 100% 33% | 210 85% 62% | `text-accent-foreground` | Texto em accent |

### Tokens extras (chat e UI)

| Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Uso |
|-----------|-------------------|------------------|-----|
| `--bubble-bot` | 209 36% 96% | 216 36% 14% | Bolha do assistente |
| `--nav-active` | 210 70% 94% | 210 45% 16% | Nav ativo (alias visual do accent) |
| `--input-bg` | 0 0% 100% | 216 40% 10% | Fundo de campos (referência) |
| `--secondary` | 210 6% 60% | 216 38% 13% | Neutro secundário (evitar texto em badge dark) |
| `--secondary-foreground` | 209 11% 15% | 0 0% 100% | Texto sobre secondary |

### Bordas e inputs (shadcn)

No shadcn, `--input` é a **cor da borda** de Input / Select / Textarea, não o fundo do campo.

| Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso |
|-----------|-------------------|------------------|-----------------|-----|
| `--border` | 220 13% 91% · #E5E7EB | 216 18% 26% · #36404E | `border-border` | Divisores, cards |
| `--input` | 220 9% 83% · #D0D2D8 | 216 16% 30% · #404A59 | `border-input` | Borda de inputs |
| `--border-subtle` | 220 13% 95% | 216 22% 20% | custom | Bordas muito suaves |
| `--btn-secondary-border` | 220 9% 83% | 216 16% 30% | custom | Outline secundário |

### Texto secundário

| Token CSS | Light (HSL · HEX) | Dark (HSL · HEX) | Classe Tailwind | Uso |
|-----------|-------------------|------------------|-----------------|-----|
| `--muted-foreground` | 209 7% 46% · #6D767E | 212 9% 58% · #8B949E | `text-muted-foreground` | Subtítulos, hints |
| `--placeholder` | 220 9% 66% | 212 10% 31% | `text-placeholder` / `placeholder:` | Placeholders |

### Gradientes e glow (efeitos)

| Token | Light | Dark |
|-------|-------|------|
| `--gradient-cyber` | `135deg`, hsl(210 100% 33%) → hsl(210 90% 42%) | hsl(210 90% 52%) → hsl(210 100% 40%) |
| `--gradient-subtle` | #FFF → hsl(210 17% 98%) | hsl(216 42% 11%) → hsl(216 48% 8%) |
| `--glow-cyan` / `--glow-blue` | sombra azul suave 12–15% opac. | sombra azul 28–35% opac. |

Classes utilitárias: `.gradient-text`, `.cyber-glow`, `.glass-effect` em `src/index.css`.

---

## Tipografia

> Mesma escala em light e dark.

| Nível | Tamanho | Peso | Line Height | Classe Semântica |
|-------|---------|------|-------------|------------------|
| Display / Commander | 32px (`--fs-display`) | 700 | 1.25 (`--lh-tight`) | text-display |
| Heading 1 — Modal | 24px (`--fs-h1`) | 600 | 1.25 | text-h1 |
| Heading 2 — Seção | 18px (`--fs-h2`) | 600 | 1.5 (`--lh-body`) | text-h2 |
| Heading 3 | 15px (`--fs-h3`) | — | — | text-h3 |
| Body | 14px (`--fs-body`) | 400 | 1.5 | text-body |
| Small / Timestamp | 12px (`--fs-small`) | 400 | — | text-small |
| Caption | 11px (`--fs-caption`) | 500 | — | text-caption |
| Nav link | 13px | 500 (`--fw-medium`) | — | text-nav-link |
| Nav brand | 15px | 700 (`--fw-bold`) | — | text-nav-brand |
| Brand lockup (tagline) | 10px | 600 | — | text-brand-tag |
| Brand lockup (nome) | 16px | 700 | — | text-brand-name |
| Hero título (catálogo) | clamp(28px, 4vw, 42px) | 700 | 1.25 | text-hero |
| Section title | 28px | 700 | — | text-section-title |

Tokens de peso: `--fw-regular` 400, `--fw-medium` 500, `--fw-semibold` 600, `--fw-bold` 700.
Tokens de line-height: `--lh-tight` 1.25, `--lh-body` 1.5, `--lh-relaxed` 1.65.

---

## Espaçamento

Base unit: **4px**

| Token | Valor | Classe Semântica |
|-------|-------|------------------|
| --space-1 | 4px | p-1 / m-1 / gap-1 |
| --space-2 | 8px | p-2 / m-2 / gap-2 |
| --space-3 | 12px | p-3 / m-3 / gap-3 |
| --space-4 | 16px | p-4 / m-4 / gap-4 |
| --space-5 | 20px | p-5 / m-5 / gap-5 |
| --space-6 | 24px | p-6 / m-6 / gap-6 |
| --space-7 | 32px | p-7 / m-7 / gap-7 |
| --space-8 | 48px | p-8 / m-8 / gap-8 |
| --space-9 | 64px | p-9 / m-9 / gap-9 |
| --section-y | 64px | py-section |
| --section-x | 40px | px-section |
| --nav-h | 56px | h-nav |
| --container | 1200px | max-w-container |

---

## Border Radius

| Token | Valor | Classe Semântica | Uso |
|-------|-------|------------------|-----|
| --radius-sm | 6px | rounded-sm | Chat items, detalhes |
| --radius-md | 8px | rounded-md | Botões, inputs, nav items, badges |
| --radius-lg | 12px | rounded-lg | Cards, bolhas, demo wrap |
| --radius-xl | 16px | rounded-xl | Modal Personalidade |
| --radius-pill | 999px | rounded-pill | Chat bar (composer) |
| 50% | — | rounded-full | Botão send circular |

---

## Sombras

| Token CSS | Light | Dark | Classe Tailwind | Uso |
|-----------|-------|------|-----------------|-----|
| `--shadow-card` | `0 4px 12px rgba(0,0,0,0.06)` | `0 4px 16px rgba(0,0,0,0.35)` | `shadow-card` | Cards elevados |
| `--shadow-modal` | `0 16px 40px rgba(0,0,0,0.12)` | `0 24px 48px rgba(0,0,0,0.55)` | `shadow-modal` | Modais, dialogs |

Glow Online (badge): `box-shadow: 0 0 8px hsl(var(--success) / 0.5)`.

---

## Componentes

> Use referências a tokens — valores resolvem para light/dark conforme o tema ativo.

### Botão Primary (HGTX — Nova Sessão / Salvar Perfil)
```
bg-primary hover:bg-primary-hover active:bg-primary-pressed
text-white rounded-md px-[18px] py-[10px]
text-[13px] font-semibold inline-flex items-center gap-2
border-none cursor-pointer transition-[background] duration-200
disabled:opacity-45 disabled:cursor-not-allowed
```

### Botão Primary (catálogo / hero)
```
bg-primary hover:bg-primary-hover active:bg-primary-pressed active:translate-y-px
text-white rounded-md px-6 py-3 text-sm font-semibold
border-none cursor-pointer transition-all duration-200
```

### Botão Outline (Nova Pasta)
```
bg-transparent text-primary border border-btn-secondary
rounded-md px-[18px] py-[10px] text-[13px] font-medium
inline-flex items-center gap-2 cursor-pointer
hover:border-secondary transition-[border-color] duration-200
```

### Botão Secondary (catálogo)
```
bg-transparent text-primary border border-btn-secondary
rounded-md px-6 py-3 text-sm font-medium
hover:border-secondary hover:bg-black/[0.03] (light) / hover:bg-white/[0.04] (dark)
transition-all duration-200 cursor-pointer
```

### Botão Ghost (Cancelar)
```
bg-transparent text-secondary border-none rounded-md px-[14px] py-2
text-[13px] cursor-pointer
hover:text-primary hover:bg-black/[0.04] (light) / hover:bg-white/[0.05] (dark)
transition-all duration-200
```

### Botão Send (circular)
```
w-10 h-10 rounded-full bg-primary text-white border-none
flex items-center justify-center text-base cursor-pointer
```

### Nav Sticky (catálogo DS)
```
sticky top-0 z-[100] h-nav flex items-center justify-between px-section
bg-nav backdrop-blur-[12px] border-b border-divider
```

### Nav CTA
```
bg-primary hover:bg-primary-hover text-white rounded-md
px-[18px] py-2 text-[13px] font-semibold border-none cursor-pointer
```

### Nav Item (sidebar)
```
flex items-center gap-3 px-3 py-2 rounded-md text-[13px] text-secondary
```

### Nav Item Ativo
```
bg-nav-active text-primary
```

### Nav Chat Item (lista conversas)
```
flex justify-between items-center px-3 py-2 text-xs text-secondary rounded-sm
/* timestamp */ text-[11px] text-placeholder
```

### Input / Select / Textarea
```
font-sans text-sm px-[14px] py-[10px] rounded-md
border border-divider bg-input text-primary outline-none w-full
placeholder:text-placeholder
transition-[border-color,box-shadow] duration-200
focus:border-primary focus:shadow-[0_0_0_3px_var(--color-focus-ring)]
disabled:opacity-50 disabled:cursor-not-allowed
```

### Textarea (modal)
```
[classes input] min-h-[120px] resize-y
```

### Input Search (com ícone)
```
relative /* wrap */
[input] pl-9
/* ícone */ absolute left-3 top-1/2 -translate-y-1/2 text-placeholder text-sm
```

### Chat Composer Bar
```
flex items-center gap-3 py-2 pr-2 pl-5
border border-divider rounded-pill bg-input max-w-[560px]
/* input interno */ flex-1 border-none bg-transparent text-sm text-primary outline-none placeholder:text-placeholder
/* + btn-send */
```

### Badge Online
```
inline-flex items-center gap-2 text-small font-medium text-secondary
/* dot */ w-2 h-2 rounded-full bg-success shadow-[0_0_8px_rgba(35,209,96,0.5)]
```

### Badge Self-Hosted
```
inline-flex items-center gap-2 text-caption text-placeholder
px-3 py-2 border border-divider rounded-md
```

### Card Modal (Personalidade)
```
max-w-[480px] p-6 bg-surface-card border border-divider rounded-xl shadow-modal
```

### Card Modal Header
```
flex justify-between items-start mb-4
/* título */ text-h2 font-semibold
```

### Card Modal Close
```
w-8 h-8 border-none rounded-md bg-transparent text-secondary text-lg cursor-pointer
hover:text-primary hover:bg-black/[0.05] (light) / hover:bg-white/[0.06] (dark)
```

### Card Modal Actions
```
flex justify-end gap-3 mt-5
/* Cancelar: btn-hgtx-ghost | Salvar: btn-hgtx-primary */
```

### Bolha Bot (boas-vindas)
```
max-w-[420px] px-5 py-4 bg-bubble-bot rounded-lg
text-sm text-secondary leading-relaxed
```

### Layout Demo (3 colunas)
```
grid grid-cols-[200px_280px_1fr] border border-divider rounded-lg overflow-hidden min-h-[320px]
/* sidebars */ bg-sidebar p-4 border-r border-divider
/* main */ bg-page p-5 flex flex-col items-center justify-center
```

### Brand Lockup (sidebar)
```
text-[10px] font-bold uppercase tracking-[0.12em] text-secondary mb-4
/* nome */ block text-sm text-primary tracking-[0.06em]
```

### Folder Label (sidebar)
```
text-xs font-medium text-secondary py-2 mt-3
```

---

## Tema — como aplicar

1. **Tokens light** em `:root` e **tokens dark** em `.dark` — ver `src/index.css`.
2. **App:** `ThemeProvider` (`next-themes`) com `attribute="class"`, `storageKey="hgtx-commander-theme"`, temas `light` | `dark`.
3. **Tailwind:** cores semânticas em `tailwind.config.ts` → `hsl(var(--primary))`, etc.

Tokens **compartilhados** (não mudam com o tema): `--fs-*`, `--space-*`, `--radius-*`, `--fw-*`, `--lh-*`, `--section-*`, `--nav-h`, `--container`.

Texto sobre botões primários: sempre `--primary-foreground` (`#FFFFFF`).

### Mapeamento rápido (legado → atual)

| Doc / HTML antigo | Token atual |
|-------------------|-------------|
| `#0061ff` / `#1a73e8` | `--primary` → #0054A8 (light) / #1685F3 (dark) |
| `bg-page` | `bg-background` |
| `bg-sidebar` | `bg-sidebar` (`--sidebar-background`) |
| `text-secondary` (corpo) | `text-muted-foreground` |
| `border-divider` | `border-border` |

---

*Atualizado para refletir `src/index.css` (HGTX Commander redesign).*  
*Para uso como referência no Cursor e agentes de código.*
