---
type: rule
name: css-global-betha
description: Define o padrão de CSS global com variáveis --bth-* para os frontends de gestão pública/governo do ecossistema
scope: global
trigger: model_decision
priority: alta
updatedAt: "2026-10-14"
---

# Regra: CSS Global Betha — Variáveis `--bth-*`

Todo frontend de módulo voltado a governo/gestão pública (identificado via `modulo-id` e `modulo-tipo` em `memorias-ia/modulo.yml`) deve possuir um arquivo CSS global com as variáveis `--bth-*` e reset visual Betha.

## Localização por Tipo de Frontend (`*-front`)

| Arquitetura do Pacote `<modulo>-front` | Arquivo CSS Global | Importado em |
|----------------------------------------|--------------------|--------------|
| SPA React / Vite | `src/styles/index.css` ou `src/styles/global.css` | `index.tsx` / `App.tsx` |
| Next.js / Nuxt / SSR | `src/styles/globals.css` | `layout.tsx` / `app.vue` |
| Vue 3 / Vite | `src/styles/global.css` | `main.ts` |

## Variáveis Obrigatórias

```css
:root {
  /* Cores primárias */
  --bth-primary:     #007bff;
  --bth-dark:        #343a40;
  --bth-body-bg:     #EBEDF0;
  --bth-white:       #ffffff;
  --bth-border:      #dee2e6;

  /* Texto */
  --bth-text:        #212529;
  --bth-text-muted:  #495057;
  --bth-secondary:   #6c757d;

  /* Semânticas */
  --bth-success:     #28a745;
  --bth-danger:      #dc3545;
  --bth-warning:     #ffc107;
  --bth-info:        #17a2b8;

  /* Utilitárias */
  --bth-light-bg:    #f8f9fa;
  --bth-border-radius: 0.25rem;
  --bth-font:        "Open Sans", Arial, sans-serif;
  --bth-shadow-sm:   0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
  --bth-shadow:      0 0.5rem 1rem rgba(0,0,0,.15);

  /* Seleção de itens (cartões interativos) */
  --bth-selected-bg: #cce5ff;
  --bth-selected-hover: #b8daff;
}
```

## Reset Global Obrigatório

```css
body {
  font-family: var(--bth-font);
  font-size: 0.875rem; /* 14px */
  background-color: var(--bth-body-bg);
  color: var(--bth-text);
  margin: 0;
}

/* Scrollbar personalizada */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6c757d; }
```

## Fonte Open Sans

- **Via pacote NPM (recomendado sem request externo):** `@fontsource/open-sans`
- **Ou via `<link>` no `index.html`:**

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet" />
```

## Regras

✅ **Correto:** usar `var(--bth-primary)` nos componentes  
✅ **Correto:** o arquivo global é a única fonte das variáveis — componentes não redeclaram  
❌ **Incorreto:** declarar cores hardcoded (`#007bff`, `#343a40`) diretamente nos componentes  
❌ **Incorreto:** ter `--bth-*` duplicadas em múltiplos arquivos CSS  

## Impacto

Garante consistência visual entre todos os frontends do módulo e facilita troca de tema — alterar uma variável reflete em todo o sistema.

## Referências

- Identidade do Módulo: `memorias-ia/modulo.yml`
- Rule: `estilos-design-system`