re-design

project-context.md

@@ -4,7 +4,7 @@
 
 Mindforge é uma ferramenta de estudo para auxiliar na preparação para concursos públicos brasileiros. O sistema permite validar e gerar materiais de estudo a partir de arquivos Markdown hospedados em repositórios Git, utilizando IA (API compatível com OpenRouter/OpenAI) para processamento.
 
-A interface é em **português brasileiro** e possui um tema escuro com efeito vidro ("glassy-look").
+A interface é em **português brasileiro** e possui um tema claro quente com estética vintage acadêmica — tons de creme, pergaminho e dourado com texturas de papel, seguindo as diretrizes em `GUIDELINES-ESTILO.md`.
 
 ---
 
@@ -20,7 +20,7 @@ A interface é em **português brasileiro** e possui um tema escuro com efeito v
 | **diff** | ^8.0.3 | Diff de texto (word-level) |
 
 > Nota: `marked` v17+ inclui tipos TypeScript nativos. `@types/marked` foi removido. `@types/diff` v7 permanece em devDependencies como fallback de tipos.
-| **Google Fonts (Lato)** | 300/400/700 | Tipografia da interface |
+| **Google Fonts (Inter)** | 400..950 (variável) | Tipografia da interface |
 
 ### Backend API (Mindforge.API)
 | Tecnologia | Versão | Finalidade |
@@ -125,9 +125,10 @@ Formas de requisição principais:
 - **CSS**: Um arquivo `.css` por componente, importado diretamente. **Sem CSS Modules.**
 - **Estado**: Apenas estado local (`useState`). Sem store global, sem Context API.
 - **Roteamento**: Alternância de componentes via `display: block/none` com o estado `activeModule`. Não usa `react-router`.
-- **API**: Chamadas via `MindforgeApiService` (objeto singleton com métodos estáticos usando `fetch`).
+- **API**: Chamadas via `MindforgeApiService` (objeto singleton com métodos assíncronos usando `fetch`).
 - **TypeScript**: Modo estrito, `erasableSyntaxOnly`, `verbatimModuleSyntax`, `noUnusedLocals`, `noUnusedParameters`.
 - **Alias**: `react` e `react-dom` mapeados para `preact/compat/` no tsconfig.
+- **Layout**: `.app` usa CSS Grid (`grid-template-columns: 288px 1fr`) com Sidebar sticky + `.main` contendo Topbar e área de conteúdo.
 
 ### Backend (C#/.NET 9)
 - **Namespaces**: `Mindforge.API.Controllers`, `Mindforge.API.Services`, etc.
@@ -138,21 +139,38 @@ Formas de requisição principais:
 
 ### UI/UX
 - **Idioma**: Todo texto em **português brasileiro**.
-- **Tema**: Escuro com efeito vidro (glassy). `backdrop-filter: blur()`, fundos `rgba` semitransparentes.
-- **Botões**: Estilo iOS-like, modernos. Variantes `primary` (com blur) e `secondary` (transparente).
-- **Tipografia**: Lato (Google Fonts), pesos 300/400/700.
-- **Background**: `#005873` (azul petróleo escuro). Não muito escuro.
+- **Tema**: Claro quente vintage ("mesa de estudo pessoal"). Fundos creme/pergaminho/dourado com textura de papel (grid via `body::before`). Vidro translúcido com `backdrop-filter` em tons quentes.
+- **Botões**: Estilo pill quente com sombras marrons. Variantes `primary` (gradiente azul, com brilho hover) e `secondary` (translúcido pergaminho).
+- **Tipografia**: Inter (UI global), Georgia/Times New Roman (marca e cabeçalhos), Segoe UI/Inter (conteúdo do flashcard).
+- **Background**: Gradiente radial quente (dourado/azul) sobre base `#fff8e6` com overlay de grid de papel 24px.
+- **Layout**: CSS Grid (`grid-template-columns: 288px minmax(0, 1fr)`). Sidebar sticky com textura diagonal. Topbar integrada ao fluxo (não fixa).
+- **Animações**: Apenas sob ação do usuário (flip 3D do flashcard, carimbo, saída do cartão, confete canvas). Sem animações infinitas ou spinners.
+- **Flashcard**: Cartão 3D com efeito `rotateY(180deg)`, frente papel pautado com borda tracejada, verso azulado. Carimbo de feedback (correto/incorreto). Confete canvas ao acertar.
+- **Responsivo**: Breakpoints em 1120px (sidebar colapsada) e 760px (layout single-column).
 
 ### Variáveis CSS (definidas em `index.css`)
 ```css
---color-bg: #005873;
---color-header: #0f0f0f;
---color-sidebar: #013a4c;
---color-text-creamy: #f4f5f5;
---color-accent: #00b4d8;
---color-accent-rgb: 0, 180, 216;
---color-accent-hover: #0096c7;
---font-main: 'Lato', sans-serif;
+--bg: #fbf3df;
+--bg-soft: #fff9ea;
+--paper: #fffaf0;
+--paper-deep: #f2dfb3;
+--ink: #2b241c;
+--muted: #7b6a50;
+--line: rgba(82, 60, 28, 0.18);
+--blue: #3f7cac;
+--blue-deep: #255f8d;
+--green: #4f8f5a;
+--green-deep: #32683b;
+--red: #b75b4d;
+--red-deep: #8d3c32;
+--gold: #c79539;
+--violet: #7e65a8;
+--shadow: 0 28px 70px rgba(58, 42, 17, 0.18);
+--card-shadow: 0 30px 90px rgba(76, 48, 12, 0.20);
+--radius-xl: 32px;
+--radius-lg: 22px;
+--radius-md: 16px;
+--ease: cubic-bezier(.2,.75,.2,1);
 ```
 
 ### Git e Scripts de Build/Deploy