/* public/style/tokens.css Système de tokens — repris tel quel du projet Claude Design « Soundboard Discord » (voir docs/design/SYSTEME.md). Un seul jeu de valeurs, deux thèmes. ⚠️ Ces valeurs ne se « simplifient » pas. Le thème sombre n'est pas l'inversion algébrique du clair : --on-accent y devient une encre sombre et non un blanc, parce que --accent passe de L 0.52 à L 0.74 et qu'un texte blanc dessus tomberait sous le seuil de contraste AA. Le même raisonnement vaut pour --faint, dont la luminance est choisie pour tenir 4,5:1 sur --surface comme sur --bg. Le thème suit l'attribut `data-theme` posé sur , jamais la préférence du système directement : le site a son propre sélecteur, et laisser les deux décider donnerait un thème clair sur un fond sombre au premier basculement. */ :root, [data-theme='light'] { color-scheme: light; --accent: oklch(0.52 0.16 275); --accent-soft: oklch(0.94 0.035 275); --on-accent: oklch(0.99 0.005 275); --live: oklch(0.55 0.15 150); --live-soft: oklch(0.94 0.045 150); --warn: oklch(0.62 0.15 70); --warn-soft: oklch(0.95 0.05 70); --danger: oklch(0.52 0.17 25); --danger-soft: oklch(0.95 0.04 25); --bg: oklch(0.975 0.004 275); --surface: oklch(1 0 0); --surface2: oklch(0.945 0.006 275); --line: oklch(0.88 0.008 275); --text: oklch(0.22 0.012 275); --dim: oklch(0.46 0.012 275); --faint: oklch(0.52 0.01 275); } [data-theme='dark'] { color-scheme: dark; --accent: oklch(0.74 0.14 275); --accent-soft: oklch(0.3 0.06 275); /* Encre sombre, pas un blanc : voir l'avertissement en tête de fichier. */ --on-accent: oklch(0.17 0.03 275); --live: oklch(0.72 0.14 150); --live-soft: oklch(0.27 0.05 150); --warn: oklch(0.78 0.13 70); --warn-soft: oklch(0.3 0.06 70); --danger: oklch(0.7 0.15 25); --danger-soft: oklch(0.29 0.06 25); --bg: oklch(0.18 0.008 275); --surface: oklch(0.23 0.01 275); --surface2: oklch(0.28 0.012 275); --line: oklch(0.34 0.012 275); --text: oklch(0.93 0.006 275); --dim: oklch(0.72 0.01 275); --faint: oklch(0.64 0.01 275); } /* Grandeurs non chromatiques, elles aussi tenues en un seul endroit. */ :root { --radius: 6px; --radius-sm: 4px; --gap: 8px; --cible-tactile: 44px; --police: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --police-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace; }