/* Palier 9 — Design tokens (light-only). Voir docs/superpowers/specs/2026-05-08-palier-9-design-refonte-design.md */
@font-face {
font-family: 'Inter';
src: url('/static/fonts/Inter.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('/static/fonts/JetBrainsMono.woff2') format('woff2-variations');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
:root {
--canvas: #FAFAFA;
--surface: #FFFFFF;
--muted: #F4F4F5;
--border: #E4E4E7;
--fg-muted: #71717A;
--fg: #0A0A0B;
--accent: #2563EB;
--accent-2: #0EA5E9;
--accent-soft: #F0F9FF;
--success: #16A34A;
--danger: #DC2626;
--warning: #EA580C;
/* Variantes texte (contraste AA, audit-ui 2026-07-24) : --warning/--success restent
inchangés pour les pastilles/barres décoratives (dot statut, remplissage jauge) ;
ces deux-là servent UNIQUEMENT quand la couleur porte du texte lisible (chiffres
de jauge, message d'alerte quota, delta de tuile). #EA580C ≈ 3.56:1 sur blanc et
#16A34A ≈ 3.30:1 sur blanc échouent tous deux 4.5:1 — nuance -700 même famille. */
--warning-text: #C2410C;
--success-text: #15803D;
/* Texte d'une pastille neutre posée sur --muted : --fg-muted (#71717A)
plafonne à 4,34:1 sur #F4F4F5 et échoue le 4,5:1 (audit axe-core
2026-07-25, volet 2 — pastilles « Partiel » des Conversations,
« Expirée » des Commandes, statut neutre des Leads). Nuance -600. */
--pill-neutral-text: #52525B;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 12px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
/* — Tokens v2 (chantier refonte, T4 — variante A « Net & compact », GO Romain 2026-07-24) — */
/* Échelle d'espacement, base 4 px (linéaire : --space-N = N × 4 px) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
/* Échelle typographique + interlignages */
--text-xs: 10.5px; /* labels uppercase (sections, en-têtes de colonnes) */
--text-sm: 12.5px; /* texte secondaire, boutons */
--text-md: 13px; /* base UI (nav, cellules, corps) */
--text-lg: 15px; /* titres de cards */
--text-xl: 18px; /* titres de sections */
--text-2xl: 24px; /* titre de page */
--lh-tight: 1.2;
--lh-snug: 1.35;
--lh-normal: 1.5;
/* États */
--ring: 2px solid var(--accent);
--hover-bg: var(--muted);
/* Ombres & cadrage */
--shadow-md: 0 2px 8px rgba(9, 9, 11, 0.06);
--content-max: 1240px;
}
html, body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
code, pre, .font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Le preflight du CDN Tailwind pose ::placeholder à #9CA3AF, soit 2,54:1 sur
blanc — sous le 4,5:1 AA. Dans la console les placeholders ne répètent pas le
libellé, ils donnent l'EXEMPLE de ce qu'il faut saisir (« Dressing 3 portes à
partir de 1 890 € ») : c'est du contenu instructif, il doit se lire.
--fg-muted mesure 4,83:1 sur --surface et 4,63:1 sur --canvas, les deux seuls
fonds de champ de la console. ⚠️ Il ne passerait PAS sur --muted (4,34:1) :
un champ posé sur ce fond aurait besoin de --pill-neutral-text.
opacity: 1 — sans ça Firefox applique une opacité par défaut au placeholder.
axe classe ces nœuds « incomplete » (il ne sait pas lire un pseudo-élément) :
le contrôle se fait par getComputedStyle(el, '::placeholder').
⚠️ Le `:root` n'est PAS décoratif, ne pas le retirer. Le CDN Tailwind INJECTE
sa feuille dans au runtime, donc APRÈS ce fichier (mesuré : le
tokens.css est l'enfant n°7 de , le