/* tokens.css — variables des deux thèmes + keyframes ping.
   Source de vérité de l'identité visuelle « point d'alerte ».
   Surfaces tonales Material 3, accent violet, fond pointillé. */

:root,
html[data-theme="light"] {
  --bg: #fdfaff;
  --surface: #f4edfb;
  --ink: #0f1419;
  --muted: #6b6459;
  --line: transparent;
  --amber: #a567e3;
  --amber-soft: #eaddf8;
  /* Violet de TEXTE (contraste >= 4.5:1) : 5.5:1 sur --surface, 4.86:1 sur --amber-soft,
     6.08:1 sur --bg. --amber lui-meme ne depasse pas 3.6:1 et ne convient qu'aux aplats. */
  --amber-ink: #7d3fbf;
  --green: #16a34a;
  --green-soft: #e9f7ee;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --shadow: 0 1px 3px rgba(30, 20, 50, .10), 0 4px 12px rgba(30, 20, 50, .06);
  --dot: rgba(120, 95, 175, .13);
  --bg-decor: url('/img/fond-constellations-jour.svg');
}

html[data-theme="dark"] {
  --bg: #141218;
  --surface: #2e3440;
  --ink: #f2efe9;
  --muted: #9aa3ad;
  --line: transparent;
  --amber: #bd8ef0;
  --amber-soft: #332a44;
  /* En sombre, l'accent est deja un violet clair sur fond sombre : 4.93:1 sur --surface,
     5.33:1 sur --amber-soft. Le token existe pour que les regles soient communes. */
  --amber-ink: #bd8ef0;
  --green: #22c55e;
  --green-soft: #12281a;
  --danger: #ef4444;
  --danger-soft: #3a1c1c;
  --shadow: 0 1px 3px rgba(30, 20, 50, .10), 0 4px 12px rgba(30, 20, 50, .06);
  --dot: rgba(255, 255, 255, .10);
  --bg-decor: url('/img/fond-constellations-nuit.svg');
}

/* Anneau vert qui s'étend puis disparaît — même composant pour le point
   du logo (.brand .bang .dot) et la pastille d'état actif (.dot-live). */
@keyframes ping {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(3.2); opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
  .brand .bang .dot::after,
  .dot-live::after {
    animation: none;
  }
}