# 📦 Design System — Green Food Delivery App

Este documento define o **design system oficial** do webapp de food delivery, baseado em uma identidade visual **fresh, health-focused e energética**, com forte uso de verde neon e contrastes suaves.

Este arquivo deve ser usado como **prompt base canônico** para qualquer IA, designer ou desenvolvedor.

---

## 1. FUNDAMENTOS VISUAIS

### 1.1 🎨 Paleta de Cores

#### Cores Principais

```ts
colors: {
  primary: "#8CFF2E",       // ação principal, CTAs, destaque
  secondary: "#388E3C",     // ações secundárias, títulos
  backgroundLight: "#F7F8F5",
  backgroundDark: "#18230F",
  textPrimary: "#333333",
  textInverse: "#FFFFFF"
}
```

Uso:
- Primary → botões principais, ícones ativos, ratings
- Secondary → headers, botões secundários
- BackgroundLight → fundo global
- BackgroundDark → dark mode

---

### 1.2 🌙 Dark Theme

Dark mode nativo, não invertido.

```ts
dark: {
  background: "#18230F",
  surface: "rgba(255,255,255,0.05)",
  textPrimary: "#FFFFFF",
  textSecondary: "#A3A3A3",
  primary: "#8CFF2E",
  secondary: "#388E3C"
}
```

---

### 1.3 🔤 Tipografia

Fonte oficial:
- **Plus Jakarta Sans**

```ts
typography: {
  fontFamily: "'Plus Jakarta Sans', sans-serif",

  heading1: {
    size: "30px",
    weight: 800
  },

  heading2: {
    size: "22px",
    weight: 800
  },

  body: {
    size: "16px",
    weight: 400,
    lineHeight: "1.6"
  },

  button: {
    size: "14px",
    weight: 800,
    transform: "uppercase",
    letterSpacing: "0.08em"
  },

  caption: {
    size: "10px",
    weight: 700,
    letterSpacing: "0.12em"
  }
}
```

---

### 1.4 📐 Bordas, Espaçamento e Elevação

```ts
radius: {
  md: "0.75rem",
  lg: "1rem",
  xl: "1.5rem",
  full: "9999px"
}

spacing: [4, 8, 12, 16, 24, 32]

shadow: {
  soft: "0 4px 20px -2px rgba(0,0,0,0.05)",
  glow: "0 8px 24px rgba(140,255,46,0.2)"
}
```

---

## 2. COMPONENTES

### 2.1 🔘 Botões

#### Primary Action Button
- Fundo: primary
- Texto: secondary
- Altura: 56px
- Radius: lg
- Sombra glow
- Feedback de escala

```ts
Button {
  variant: "primary" | "secondary"
  fullWidth: boolean
}
```

---

### 2.2 🔍 Input & Search

- Fundo claro
- Ícone à esquerda
- Sem borda
- Focus ring em primary

```ts
SearchInput {
  placeholder: string
  icon: "search"
}
```

---

### 2.3 🃏 Food Card

Contém:
- Imagem hero
- Botão de favorito flutuante
- Nome
- Rating
- Tempo estimado

```ts
FoodCard {
  title: string
  image: string
  rating: number
  timeRange: string
  favorite: boolean
}
```

---

### 2.4 🧭 Navigation Bar

- Fixa no rodapé
- Ícones Material Symbols
- Item ativo em primary

```ts
TabBar {
  items: TabItem[]
  activeIndex: number
}
```

---

### 2.5 🧩 Ícones

- Material Symbols Outlined
- Peso visual leve
- Cor semântica

```ts
Icon {
  name: string
  active?: boolean
}
```

---

## 3. IMPLEMENTAÇÃO (TAILWIND-FIRST)

### 3.1 Tokens no Tailwind

```ts
theme.extend.colors = {
  primary: "#8CFF2E",
  secondary: "#388E3C",
  backgroundLight: "#F7F8F5",
  backgroundDark: "#18230F",
  typographyDark: "#333333"
}
```

---

## 4. PRINCÍPIOS DO SISTEMA

- Mobile-first
- Tailwind-first
- Dark mode por classe
- Tokens semânticos
- UI energética e saudável
- Feedback visual imediato