/* ==========================================================================
   apps/dashboard — styles specifiques

   Meme regle que le CRM et le CMS : regles CSS ordinaires, pas des
   utilitaires Tailwind (packages/starting-point/dist/main.css est
   precompile en scannant les sources — npm run css:build apres tout
   nouvel utilitaire). Vocabulaire partage avec CRM/CMS : `.gf-badge`,
   `.tone-*`.
   ========================================================================== */

.tone-green  { --gf-tone: oklch(0.55 0.18 150); }
.tone-yellow { --gf-tone: var(--warning, oklch(0.65 0.15 75)); }
.tone-red    { --gf-tone: var(--destructive); }
.tone-blue   { --gf-tone: oklch(0.58 0.16 250); }
.tone-grey   { --gf-tone: var(--muted-foreground); }

.gf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--gf-tone, currentColor) 35%, transparent);
  background: color-mix(in oklch, var(--gf-tone, currentColor) 12%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.gf-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gf-tone, currentColor);
  flex: none;
}