# Palette Corelia

> Source de vérité unique : tokens définis dans [`app/globals.css`](../app/globals.css).
> Tous les hex listés ici sont les valeurs finales validées.

## Base (warm stone)

| Token | Hex | Usage |
|---|---|---|
| `--color-background` | `#0c0a09` | Fond global de l'application (stone-950) |
| `--color-surface` | `#1c1917` | Cards, panels, sidebars (stone-900) |
| `--color-surface-2` | `#292524` | Surfaces élevées, hover, tooltips (stone-800) |
| `--color-surface-3` | `#44403c` | Surfaces très élevées, contrôles secondaires (stone-700) |

## Texte

| Token | Hex | Usage |
|---|---|---|
| `--color-text` | `#fafaf9` | Texte principal, titres (stone-50) |
| `--color-text-muted` | `#a8a29e` | Texte secondaire, descriptions (stone-400) |
| `--color-text-dim` | `#78716c` | Métadonnées, légendes (stone-500) |
| `--color-text-faint` | `#57534e` | Labels uppercase, hints (stone-600) |

## Bordures

| Token | Valeur | Usage |
|---|---|---|
| `--color-border` | `rgba(231, 215, 196, 0.08)` | Séparateurs fins, contour des cards |
| `--color-border-strong` | `rgba(231, 215, 196, 0.14)` | Bordures accentuées au hover |

> Note : la teinte chaude `(231, 215, 196)` est volontaire pour rester cohérent avec le fond stone (warm white plutôt que pure white).

## Accent signature (amber)

| Token | Hex | Usage |
|---|---|---|
| `--color-accent` | `#fbbf24` | Accent principal (amber-400). Boutons primary, dots actifs, focus rings, accents charts |
| `--color-accent-hi` | `#fcd34d` | Variante claire (amber-300). Hover, italiques mis en valeur dans les titres |
| `--color-accent-lo` | `#d97706` | Variante foncée (amber-600). Gradients, ombres internes |
| `--color-accent-fg` | `#1c1917` | Texte sur fond accent (stone-900). Garantit le contraste lisibilité |
| `--color-accent-soft` | `rgba(251, 191, 36, 0.1)` | Halos diffus, fonds discrets pour éléments accent |

## États sémantiques

Stables, **ne suivent pas l'accent**. Utilisés pour signaler du sens, pas du style.

| Token | Hex | Usage |
|---|---|---|
| `--color-success` | `#22c55e` | Statuts positifs, deltas en hausse, validation |
| `--color-warning` | `#f97316` | Alertes mineures, attention requise |
| `--color-danger` | `#ef4444` | Erreurs, suppression, statuts impayés |
| `--color-info` | `#3b82f6` | Information neutre (rare, peu utilisé) |

## Couleurs charts (data viz)

Pour les graphiques quand on a besoin de plusieurs séries distinctes :

| Hex | Usage typique |
|---|---|
| `#fbbf24` (amber-400) | Métrique principale (clics, valeur primaire) |
| `#a78bfa` (purple-400) | Métrique secondaire (sessions) |
| `#60a5fa` (blue-400) | Métrique tertiaire / contexte (impressions, axe secondaire) |

Le mélange chaud (amber) + cool (purple, blue) est intentionnel : la métrique sur laquelle on veut attirer l'œil est en amber, les autres servent de contexte.

## Gradient logo

```svg
<linearGradient id="corelia-grad" x1="0" y1="0" x2="32" y2="32">
  <stop offset="0" stop-color="#fcd34d" />
  <stop offset="1" stop-color="#b45309" />
</linearGradient>
```

Lit comme un sceau / monogramme premium. Ne jamais l'utiliser ailleurs que sur le logo.

## Halos décoratifs (pages marketing)

Pour les fonds des pages marketing et des CTA, utiliser des halos diffus à très faible opacité :

```css
background: rgba(251, 191, 36, 0.10);  /* halo amber */
filter: blur(120px);

background: rgba(180, 83, 9, 0.10);    /* halo orange-700 chaud complémentaire */
filter: blur(120px);
```

## Règles d'usage

1. **Ne jamais hardcoder un hex** dans le code, sauf si le token n'existe pas. Dans ce cas, ajouter le token d'abord.
2. **Pas plus d'un accent saturé** par écran. L'amber est puissant, son économie le rend précieux.
3. **Bordures** : toujours en valeur token, jamais en `rgba(255,255,255,X)` direct (pour rester sur la teinte chaude).
4. **Texte sur accent** : utiliser `--color-accent-fg`, jamais blanc. Le contraste est meilleur.
5. **États sémantiques** : ne pas les substituer à l'accent. Le rouge reste pour le danger, le vert pour le succès, point.