# BATEC — Brand Color Usage (light + dark)

> La visión de color más trabajada de BATEC hasta la fecha. Este documento define **qué color va sobre qué fondo** en los dos temas (dark = carbón, light = champagne) y las reglas que hacen que la marca se lea igual de bien en ambos. Es la fuente de verdad de estilo para futuros materiales (decks, web, one-pagers, social).

---

## 1. Los dos temas

BATEC vive en dos modos y **ambos son primarios** — no hay un "modo correcto". Cada token cambia de valor entre temas salvo los **colores de dato**, que son fijos a propósito (deben leerse sobre carbón *y* sobre champagne).

| Token | Rol | Dark (carbón) | Light (champagne) |
|---|---|---|---|
| `--bg` | Fondo base | `#0a0a0c` | `#efe7d5` |
| `--panel` | Tarjeta / superficie 1 | `#1c1c24` | `#fbf8f1` |
| `--panel2` | Superficie 2 (hover, toggles) | `#26262f` | `#f4efe3` |
| `--line` | Bordes / divisores | `#33333f` | `#ddd4c2` |
| `--grid` | Líneas de gráfico | `#17171d` | `#e9e2d2` |
| `--text` | Texto principal | `#ffffff` | `#161519` |
| `--dim` | Texto secundario | `#9a9488` | `#5c564a` |
| `--faint` | Texto terciario / metadatos | `#615c52` | `#948c7b` |
| `--gold` | Acento champagne | `#d4c5a8` | `#8a6d34` |
| `--gold2` | Acento champagne 2 | `#c9b894` | `#725a26` |
| `--golddim` | Champagne apagado (líneas deco) | `#8a7a58` | `#b8a06a` |

**La idea clave:** en cada tema el oro se **invierte de luminancia** — champagne claro sobre carbón, bronce oscuro sobre champagne. Nunca uses el valor de oro de un tema sobre el fondo del otro (champagne claro sobre champagne = ilegible).

---

## 2. Colores de dato — FIJOS en ambos temas

Estos no cambian entre temas. Están elegidos para tener contraste suficiente sobre carbón **y** sobre champagne. Úsalos para gráficos, chips de rama/motor y estados.

| Token | Uso | Valor |
|---|---|---|
| `--fast` | Proyección rápida / serie A | `#e5322d` |
| `--slow` | Proyección gradual / serie B | `#3f86c6` |
| `--brst` | Rama **Estudios** | `#3ca9e8` (azul) |
| `--brpr` | Rama **Producción** | `#1eb85c` (verde) |
| `--brin` | Rama **Instituto** | `#f4d63f` (amarillo) |
| `--brlb` | Rama **Lab** | `#f59e2c` (naranja) |
| `--mpro` | Motor **Producto** | `#ff2d2d` (rojo) |
| `--mrel` | Motor **Relaciones** | `#f4d63f` (amarillo) |
| `--minf` | Motor **Infraestructura** | `#3ca9e8` (azul) |

> Los amarillos (`--brin`, `--mrel`) son el punto débil sobre champagne: **no pongas texto amarillo sobre fondo claro**. Si un chip amarillo necesita texto, el texto va en carbón (`--ink #14141a`), no en blanco.

---

## 3. El rojo REC — regla de oro

`--recred #ff2d2d` / `--red #e5322d` es el rojo de acción.

- ✅ **Solo** para estados de acción/live/urgente: grabación, botón activo, alertas, la serie "rápida", el motor Producto.
- ❌ **Nunca** como decoración, fondo de bloque neutro, ni relleno grande sin significado.
- Sobre champagne el rojo funciona pero **con moderación** — un acento, no una masa. Sobre carbón puede ocupar más.

---

## 4. Pairings — qué texto sobre qué fondo

### Tema DARK (fondo carbón `#0a0a0c` / paneles `#1c1c24`)
- **Cuerpo de texto → `--text` blanco `#ffffff`.** No uses champagne para párrafos: sobre negro el texto va **blanco**, no oro.
- **Metadatos / kickers → `--dim`** (`#9a9488`).
- **Acentos, cifras destacadas, líneas finas → `--gold` champagne `#d4c5a8`.** Es el "brillo" de la marca, dosificado.
- **Champagne sobre champagne SÍ, champagne sobre negro (como texto largo) NO.** Es decir: el oro luce como acento sobre paneles/oro, no como cuerpo sobre el fondo negro.
- Bordes: `--line` `#33333f`. Nunca blanco puro para bordes.

### Tema LIGHT (fondo champagne `#efe7d5` / paneles `#fbf8f1`)
- **Cuerpo de texto → `--text` casi-negro `#161519`.** Alto contraste, cálido.
- **Metadatos → `--dim` `#5c564a`** (topo oscuro, legible sobre crema).
- **Acentos / oro → `--gold` bronce `#8a6d34`** (el oro oscuro; el champagne claro desaparecería).
- **Rojo REC sobre champagne:** solo acento puntual, nunca bloque.
- **Nada de amarillo como texto.** Amarillo solo como relleno de chip/gráfico, con etiqueta en carbón.
- Bordes: `--line` `#ddd4c2` (champagne apagado), divisores suaves `color-mix(--text 26%)`.

---

## 5. Chips y cajas de filtro (alto contraste, invertidas)

Los chips interactivos **invierten el tema** para saltar a la vista como zona de acción:

| | Dark | Light |
|---|---|---|
| Caja contenedora (`--chipbg`) | `#ffffff` (blanca) | `#1c1c24` (carbón) |
| Chip / texto (`--chiptext`) | `#141018` (carbón) | `#f2efe8` (crema) |
| Chip activo | fondo `--gold`, texto `#141018` | igual |

Regla: **la UI de filtrado es la única superficie que invierte el fondo del tema**, precisamente para llamar la atención. El resto de superficies respetan el tema.

Barra de cobertura de capital: `--capbar` (`#d4c5a8` dark / `#14141a` light) con `--captext` en contraste.

---

## 6. Tipografía (recordatorio)

| Familia | Uso |
|---|---|
| **Anton** | Titulares display, cifras grandes (números Anton de arriba-abajo). |
| **Instrument Serif** (`.serif`) | Segunda línea de titular, tono editorial/emocional. |
| **Inter Tight** | Cuerpo, leads, UI. |
| **JetBrains Mono** | Kickers, tags, chips, metadatos, ejes de gráfico. `letter-spacing` amplio, mayúsculas. |
| **Big Shoulders Display** | Rótulos/marquesina secundarios. |

Tres registros de voz: **emocional** (estudiantes/B2C), **informativo** (productores/B2B), **transaccional** (inversores).

---

## 7. Deco de marca (líneas champagne)

- SVG de línea (`.carddeco`, `.scdeco`, `.blkdeco`) en `--golddim` a `opacity .3`, `stroke-width 2.3`, rotados ~-8°, recortados en la esquina de la caja.
- Siglas Anton gigantes (`.blkdeco`) al 5-6% de opacidad como marca de agua dentro de bloques.
- Kodak stripe (rojo/amarillo/azul) como acento de barra superior — decorativo permitido porque no es "REC red" sólido, es el arcoíris de película.

---

## 8. Checklist rápido antes de exportar

1. ¿Texto de cuerpo en `--text` (blanco en dark, casi-negro en light)? — nunca champagne como cuerpo.
2. ¿El oro es el correcto del tema? (champagne/dark, bronce/light).
3. ¿El rojo solo aparece en acción/live/dato-rápido, nunca decorando?
4. ¿Algún texto amarillo sobre fondo claro? → cámbialo a carbón.
5. ¿Los colores de dato son los fijos (no los del tema)?
6. ¿Contraste AA en metadatos `--dim` sobre su panel? (ambos temas revisados).
7. ¿Los chips de filtro invierten el fondo y el resto respeta el tema?

---

*Tokens verificados contra `index.html` del deck v5. Si cambian ahí, actualiza esta tabla.*