# ENTIA Color Tokens

All values extracted from `public_html/mcp-setup.html`, `mcp-docs.html`, `partners.html`, `funnel.html`, `entia-nav.js`, `entia-footer.js`. Cross-checked with `colors_and_type.css` (legacy).

## Primary brand

| Token | Hex | Use |
|---|---|---|
| `--blue` | `#3B82F6` | Primary brand color (Tailwind blue-500). CTAs, links, accents, brand mark, section labels. |
| `--blue-400` | `#60A5FA` | Hover, secondary CTAs, copy-button text |
| `--blue-300` | `#93C5FD` | Tertiary accent, hover for `.copy-btn:hover` |
| `--blue-dim` | `rgba(59,130,246,.08)` | Backgrounds for blue surfaces, glow areas |

The brand has **one** color: blue `#3B82F6`. No alternative brand hue is used. Any non-blue color is functional (status, neutrals, gradients).

## Surfaces (dark canvas)

| Token | Hex | Use |
|---|---|---|
| `--bg-base` | `#010409` | Page body background — pure black-blue |
| `--surface` | `#08081A` | First elevation (sections, hero behind cards) |
| `--surface-2` | `#0d1117` | Cards, code blocks (`.client-card`, `.code-block` outer) |
| `--surface-3` | `#161b22` | Code block inner (`.code-block` `<pre>` background) |

There is no light theme. ENTIA brand is dark-first by design (infrastructure tone).

## Borders

| Token | Value | Use |
|---|---|---|
| `--border` | `rgba(255,255,255,.08)` to `.09` | Default card / nav / footer dividers |
| `--border-blue` | `rgba(59,130,246,.15)` to `.30` | Active cards, hovered states, MCP `try-section` |
| `--border-strong` | `rgba(255,255,255,.12)` | Modal edges, prominent containers |

## Foregrounds (text)

| Token | Hex | Use |
|---|---|---|
| `--t1` | `#F0F0F8` | Headings primary, hero text |
| `--t1-pure` | `#FFFFFF` | h1, h2, top KPIs in dashboard |
| `--t2` | `#A0A0C0` | Nav links, secondary labels |
| `--t-body` | `#c9d1d9` | Body default in `<body>` |
| `--t-muted` | `#8b949e` | `<p>` body copy on landings, `.client-desc` |
| `--t-soft` | `#e0e0e8` | h3 |
| `--t-code` | `#e6edf3` | Code block content |

## Status

| Token | Hex | Use |
|---|---|---|
| `--success` | `#22C55E` | Success messages, "OK" badges, copied state |
| `--warning` | `#FBBF24` | Warnings, "AT_RISK" yellow |
| `--error` | `#EF4444` | Errors, "INVISIBLE" verdict, blocked badge |
| `--info` | `#60A5FA` | Info notices (uses brand blue-400) |

Status backgrounds use the same hex with low alpha:
- `rgba(34,197,94,.10)` for success surfaces
- `rgba(239,68,68,.10)` for error surfaces
- `rgba(251,191,36,.10)` for warning surfaces

## Gradients

| Name | Definition | Use |
|---|---|---|
| Try-section | `linear-gradient(135deg, rgba(59,130,246,.08), rgba(139,92,246,.06))` | `.try-section` MCP setup |
| Hero halo | `radial-gradient(ellipse at top, rgba(59,130,246,.15), transparent 60%)` | Hero backgrounds |
| Pricing card hover | `linear-gradient(180deg, rgba(59,130,246,.05), transparent)` | Plan tier cards |

The purple-ish accent `rgba(139,92,246,.06)` (Tailwind violet-500) is used **only** as a gradient stop in `.try-section`. It is not part of the palette — do not use it as a fill.

## LLM brand colors (for icons, never as ENTIA accents)

Sourced from `assets/llm-logos.svg` and `entia-footer.js`. Use ONLY when displaying the corresponding LLM's logo.

| LLM | Hex |
|---|---|
| ChatGPT (OpenAI) | `#10A37F` |
| Claude (Anthropic) | `#CC785C` (in svg) / `#D97757` (in footer js) — Anthropic brand orange |
| Gemini (Google) | gradient `#4285F4 → #9B72CB → #D96570` |
| Perplexity | `#20B8CD` / `#22B8CD` |
| Grok (xAI) | `#1DA1F2` / `#F0F0F8` (white outline variant) |
| DeepSeek | `#7B68EE` / `#4D6BFE` |

These hexes are documentation. Never use them as ENTIA brand accents.

## CSS variables — canonical export

See `colors.css` for the ready-to-include `:root { ... }` definition.

## Legacy reference

`colors_and_type_legacy.css` contains an older system with DM Sans + slightly different neutrals (`#020202`, `#0A0A0B`, `#111114`, `#F5F5F7`, etc.). Do NOT use it for new work. It is preserved for migration audits.
