# 🎨 DESIGN SYSTEM — AMD-TOPOGRAFIA, LDA.

## 📐 PALETA DE CORES OFICIAL

### Cores Primárias

| Nome | Hex | RGB | Uso Principal |
|------|-----|-----|---------------|
| **Cinza Escuro (Ardósia)** | `#435565` | `67, 85, 101` | Títulos, botões primários, textos ativos, backgrounds dark |
| **Azul Acinzentado** | `#738A9A` | `115, 138, 154` | Textos secundários, links inativos, labels, ícones |
| **Cinza Azulado Médio** | `#636D7D` | `99, 109, 125` | Textos de corpo, hover states, borders secundários |
| **Cinza Gelo (Claro)** | `#CCDBE2` | `204, 219, 226` | Borders, backgrounds claros, dividers, badges |
| **Verde Acinzentado (Musgo)** | `#697773` | `105, 119, 115` | Accents, status indicators, elementos de destaque |
| **Branco** | `#FFFFFF` | `255, 255, 255` | Backgrounds principais, textos em dark mode |

---

## 🎯 APLICAÇÃO DAS CORES

### Header / Navbar
```css
/* Links ativos */
color: #435565;

/* Links inativos */
color: #738A9A;
hover: #435565;

/* Botão primário */
background: #435565;
hover: #636D7D;

/* Botão secundário */
border: #CCDBE2;
color: #636D7D;
hover-border: #738A9A;

/* Border no scroll */
border: #CCDBE2;
```

### Hero Section
```css
/* Background overlay */
background: radial-gradient(
  ellipse at left,
  rgba(67, 85, 101, 0.90) 0%,
  rgba(67, 85, 101, 0.65) 50%,
  rgba(67, 85, 101, 0.35) 100%
);

/* Badges status */
Slide 1: #697773 (Musgo)
Slide 2: #738A9A (Azul Acinzentado)
Slide 3: #CCDBE2 (Gelo)

/* Botões CTA */
background: white;
color: #435565;
```

### Secção Sobre
```css
/* Card flutuante dark */
background: #435565;
border: #636D7D;
accent: #697773;
text-light: #CCDBE2;
text-muted: #738A9A;

/* Badge */
background: #CCDBE2/30;
border: #CCDBE2;
dot: #697773;
text: #435565;

/* Títulos */
color: #435565;

/* Parágrafos */
color: #636D7D;
strong: #435565;

/* Stats */
numbers: #435565;
accent-1: #738A9A;
accent-2: #697773;
labels: #738A9A;

/* Card localização */
background: #CCDBE2/20;
border: #CCDBE2;
hover-border: #738A9A;
icon: #435565;
title: #435565;
text: #636D7D;
coordinates: #738A9A;
```

### Menu Mobile
```css
/* Overlay */
background: #435565/60;

/* Close button */
background: #CCDBE2/30;
hover: #CCDBE2;
color: #435565;

/* Links ativos */
color: #435565;

/* Links inativos */
color: #738A9A;
hover: #435565;

/* Borders */
border: #CCDBE2;

/* Botão primário */
background: #435565;
hover: #636D7D;

/* Botão secundário */
border: #CCDBE2;
color: #636D7D;
hover: #CCDBE2/30;
```

---

## 📊 HIERARQUIA VISUAL

### Níveis de Importância

1. **Primário (Máxima atenção)**
   - Cor: `#435565` (Cinza Escuro)
   - Uso: Títulos H1, botões CTA, textos ativos

2. **Secundário (Atenção média)**
   - Cor: `#636D7D` (Cinza Azulado Médio)
   - Uso: Parágrafos, subtítulos, textos de corpo

3. **Terciário (Atenção baixa)**
   - Cor: `#738A9A` (Azul Acinzentado)
   - Uso: Labels, meta-info, timestamps, coordenadas

4. **Accent (Destaque)**
   - Cor: `#697773` (Verde Musgo)
   - Uso: Status indicators, números especiais, elementos únicos

5. **Borders/Dividers**
   - Cor: `#CCDBE2` (Cinza Gelo)
   - Uso: Separadores, borders, backgrounds claros

---

## 🎨 COMBINAÇÕES RECOMENDADAS

### Dark Mode Cards
```
Background: #435565
Border: #636D7D
Text Primary: #FFFFFF
Text Secondary: #CCDBE2
Accent: #697773
Muted: #738A9A
```

### Light Mode Cards
```
Background: #FFFFFF
Border: #CCDBE2
Text Primary: #435565
Text Secondary: #636D7D
Accent: #697773
Muted: #738A9A
```

### Badges/Pills
```
Background: #CCDBE2/30
Border: #CCDBE2
Text: #435565
Dot: #697773
```

### Buttons Primary
```
Background: #435565
Text: #FFFFFF
Hover: #636D7D
Shadow: #435565/20
```

### Buttons Secondary
```
Background: transparent
Border: #CCDBE2
Text: #636D7D
Hover Border: #738A9A
Hover Background: #CCDBE2/30
```

---

## 🔤 TIPOGRAFIA

### Font Family
```css
--font-sans: "Inter", sans-serif;
```

### Pesos Utilizados
- **300** (Light): Descrições longas, citações
- **400** (Normal): Parágrafos, corpo de texto
- **600** (Semibold): Navegação, labels
- **700** (Bold): Títulos, CTAs, números

### Escala de Tamanhos
```
10px → Labels uppercase
12px → Meta-info, timestamps
14px → Corpo de texto pequeno
15px → Navegação
16px → Corpo de texto padrão
18px → Subtítulos
20px → Títulos pequenos
24px → Títulos médios
32px → Títulos grandes
48px → Display pequeno
64px → Display médio
96px → Display grande (Hero)
```

---

## 📏 ESPAÇAMENTO

### Grid Base: 8px

```
xs:  4px  / 8px
sm:  12px / 16px
md:  20px / 24px
lg:  32px / 40px
xl:  48px / 56px / 64px
2xl: 80px / 96px / 120px
```

---

## 🔲 BORDER RADIUS

```css
--radius-lg:   8px   /* Botões, inputs */
--radius-xl:   16px  /* Cards pequenos */
--radius-2xl:  24px  /* Cards médios */
--radius-3xl:  32px  /* Cards grandes, modais */
```

---

## 🌑 SOMBRAS

### Soft Shadow (Padrão)
```css
box-shadow: 0 20px 50px -12px rgba(67, 85, 101, 0.12);
```

### Card Shadow
```css
box-shadow: 0 4px 16px rgba(67, 85, 101, 0.08);
```

### Elevated Shadow
```css
box-shadow: 0 8px 32px rgba(67, 85, 101, 0.15);
```

### Button Hover Shadow
```css
box-shadow: 0 12px 24px rgba(67, 85, 101, 0.20);
```

---

## ⚡ TRANSIÇÕES

### Padrão
```css
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
```

### Suave (Smooth)
```css
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
```

### Premium (Reveal)
```css
transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
```

---

## 🎯 ACESSIBILIDADE

### Contraste Mínimo (WCAG AA)

| Combinação | Contraste | Status |
|------------|-----------|--------|
| `#435565` em `#FFFFFF` | 7.2:1 | ✅ AAA |
| `#636D7D` em `#FFFFFF` | 5.1:1 | ✅ AA |
| `#738A9A` em `#FFFFFF` | 3.8:1 | ✅ AA Large |
| `#FFFFFF` em `#435565` | 7.2:1 | ✅ AAA |
| `#697773` em `#FFFFFF` | 4.9:1 | ✅ AA |

---

## 📱 RESPONSIVIDADE

### Breakpoints
```css
mobile:  < 768px
tablet:  768px - 1024px
desktop: > 1024px
wide:    > 1440px
```

### Container Max-Width
```css
max-width: 1440px;
padding: 0 24px (mobile)
padding: 0 48px (desktop)
```

---

## ✅ CHECKLIST DE IMPLEMENTAÇÃO

- [x] Paleta de cores definida no `app.css`
- [x] Header/Navbar com cores oficiais
- [x] Hero section com gradiente oficial
- [x] Secção Sobre com paleta completa
- [x] Menu mobile consistente
- [x] Badges com cores contextuais
- [x] Botões primários e secundários
- [x] Cards dark e light mode
- [x] Borders e dividers
- [x] Sombras atualizadas
- [ ] Secção Serviços (próximo)
- [ ] Secção Notícias/Loja (próximo)
- [ ] Footer (próximo)

---

**Última atualização:** 2025-01-XX  
**Versão:** 1.0  
**Status:** ✅ Implementado (Header + Hero + Sobre)